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:
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
😉 That’s it for now.
If you liked this article, then please subscribe to my YouTube Channel for video tutorials.
