Jak upravit libovolnou webovou stránku v Chrome (nebo libovolném prohlížeči)

Webové stránky jsou pouze dokumenty, které zobrazuje váš webový prohlížeč. Ale co kdybyste mohli napsat přímo na jakoukoli webovou stránku a upravit ji? Můžete a nepotřebujete rozšíření prohlížeče – je to funkce zabudovaná do každého moderního prohlížeče.

Tato funkce využívá funkci „document.designMode“, kterou můžete povolit prostřednictvím konzoly JavaScript vašeho webového prohlížeče. Nedávno na to upozornil Tomek Sułkowski na Twitteru, ale je to tak skvělé, že se o to musíme podělit s našimi čtenáři.

Ten pocit, když jste poprvé objevili `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) 27. září 2019

Tuto funkci můžete použít k vyčištění webové stránky před jejím vytištěním, k otestování toho, jak budou změny na webové stránce vypadat, nebo dokonce k žertování lidí. Bude to stejné jako při úpravě dokumentu ve Wordu – není potřeba nic dělat s HTML.

Chcete-li tuto funkci aktivovat, navštivte webovou stránku a poté otevřete vývojářskou konzoli. Chcete-li otevřít konzolu v prohlížeči Google Chrome, klikněte na nabídku > Další nástroje > Nástroje pro vývojáře nebo stiskněte Ctrl+Shift+i.

Zatímco zde jako příklad používáme Chrome, tato funkce funguje v jiných moderních prohlížečích, také. Zde je návod, jak otevřít konzolu v jiných prohlížečích:

V prohlížeči Mozilla Firefox klikněte na nabídku > Web Developer > Web Console nebo stiskněte Ctrl+Shift+K.
V Apple Safari klikněte na Safari > Předvolby > Upřesnit a povolte „Zobrazit nabídku Develop na liště nabídek“. Poté klikněte na Vyvinout > Zobrazit konzolu JavaScriptu.
V Microsoft Edge klikněte na nabídku > Další nástroje > Nástroje pro vývojáře nebo stiskněte F12 a poté klikněte na kartu „Konzola“.

Klikněte na kartu „Konzola“ v horní části panelu Nástroje pro vývojáře. Do konzole napište následující a stiskněte Enter:

document.designMode="on"

Nyní můžete konzolu zavřít, chcete-li, a upravit aktuální webovou stránku, jako by to byl upravitelný dokument. Klepnutím někam vložte kurzor a zadejte text. Pomocí kláves Backspace nebo Delete odstraňte text, obrázky a další prvky.

Tím se pouze změní způsob zobrazení webové stránky ve vašem prohlížeči. Jakmile stránku obnovíte, znovu uvidíte originál. Pokud přejdete na jinou webovou stránku nebo kartu, nebude v režimu návrhu, dokud neotevřete konzolu a znovu nenapíšete tento řádek.

Můžete se dokonce vrátit do konzoly a spustit následující příkaz pro vypnutí režimu návrhu:

document.designMode="off"

Webovou stránku již nebude možné upravovat, ale vaše změny budou zachovány, dokud stránku znovu neobnovíte.