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

Webové stránky jsou jen dokumenty, které zobrazuje váš webový prohlížeč. Ale co když byste mohli upravit přímo na libovolné webové stránce 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á výhody funkce „document.designMode“, kterou můžete povolit prostřednictvím konzoly JavaScriptu webového prohlížeče. Nedávno to zdůraznil Tomek Sułkowski na Twitteru, ale je to tak skvělé, že to musíme sdílet s našimi čtenáři.

Tuto funkci můžete použít k vyčištění webové stránky před jejím vytištěním, k vyzkoušení, jak budou vypadat změny na webové stránce, nebo dokonce jen k žertu. Bude to jako úpravy dokumentu Wordu - není nutné se zabývat HTML.

Chcete-li tuto funkci aktivovat, navštivte webovou stránku a poté otevřete konzolu pro vývojáře. Chcete-li konzolu otevřít 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 i v jiných moderních prohlížečích. Postup otevření konzoly v jiných prohlížečích:

  • V prohlížeči Mozilla Firefox klikněte na nabídku> Webový vývojář> Webová konzola nebo stiskněte Ctrl + Shift + K.
  • V Apple Safari klikněte na Safari> Předvolby> Pokročilé a povolte „Zobrazit nabídku Vývoj na liště nabídek“. Poté klikněte na Vytvořit> Zobrazit konzolu JavaScriptu.
  • V Microsoft Edge klikněte na nabídku> Další nástroje> Nástroje pro vývojáře nebo stiskněte klávesu F12 a poté klikněte na kartu „Konzola“.

Klikněte na kartu „Konzole“ v horní části panelu Nástroje pro vývojáře. Do konzoly zadejte následující příkaz a stiskněte klávesu Enter:

document.designMode = 'na'

Nyní můžete konzolu zavřít, pokud chcete, a upravit aktuální webovou stránku, jako by to byl upravitelný dokument. Kliknutím někam vložíte kurzor a napíšete text. K odstranění textu, obrázků a dalších prvků použijte klávesy Backspace nebo Delete.

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

Dokonce se můžete vrátit zpět do konzoly a spustit následující příkaz pro vypnutí návrhového režimu:

document.designMode = 'vypnuto'

Webovou stránku již nebude možné upravovat, ale změny zůstanou zachovány, dokud ji znovu neobnovíte.