Panayiotis Georgiou

Posted on Aug 19, 2020 • Originally published at panayiotisgeorgiou.net on Jul 27, 2020

How to Edit Any Web Page in any web browser

#javascript #tutorials #webseo #chrome

What if you could type directly on any web page to modify it live? or even create some fake screenshots? That could be awesome for any designer in order to test out font size, typography etc. The answer is that you can and this post will show you How to Edit Any Web Page in any web browser

So how is it possible to edit live a web page and experiment with it. Most awesome part you can do it without any browser extension.

The feeling when you first discovered

document.designMode

This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console.

In order to activate this feature, visit a web page and then open the developer console.

To open the console in Google Chrome, click menu > More Tools > Developer Tools or press Ctrl+Shift+i.

On other browsers:

In Mozilla Firefox, click menu > Web Developer > Web Console or press Ctrl+Shift+K.
In Apple Safari, click Safari > Preferences > Advanced and enable “Show Develop menu in menu bar.” Then, click Develop > Show JavaScript Console.
In Microsoft Edge, click menu > More Tools > Developer Tools or press F12 and then click the “Console” tab.

On the “Console” tab at the top of the Developer Tools panel just type the following into the console and press Enter:

document.designMode = 'on'

or even go back into the console to turn design mode off:

document.designMode = 'off'

This will trigger the current web page as if it was an editable document. Then you can click on any element on the web page and insert or remove any text.

As soon as you refresh the page, you’ll see the original once again.

Huge thanks and credits to: