Edit Any Web Page – Web pages are just documents that your web browser displays. But what if you could write directly to any web page to modify it? You can, and don’t need, a browser extension, it’s a built-in feature in every modern browser.
This feature takes advantage of the “ document.designMode“ function , which you can enable through the JavaScript console of your web browser. It’s so cool that we have to share it with our readers.
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
You can use this feature to clean up a web page before printing it, test how changes will look on a web page, or even just joke around with people. It will be like editing a Word document: playing with HTML is not required .
Also Read : Chromium vs Chrome – where are the differences?
Edit Any Web Page Using the Browser Console
For Chrome
To activate this feature, visit a web page and then open the developer console. To open the console in Google Chrome, 3 Dots >> More Tools >> Developer Tools or press Ctrl + Shift + i.
While we are using Chrome as an example here, this feature works in other modern browsers as well. Here’s how to open the console in other browsers and Edit Any Web Page :
- In Mozilla Firefox , Click Menu >> Console or press Ctrl + Shift + K.
- In Apple Safari , Click Safari> Preference> Advanced “Show Develop menu in menu bar .” Then click Developer> Show JavaScript console.
- And, Microsoft Edge , go to menu> More Tools> Developer Tools or press F12 and then click on the tab “Console“.
Click the ” Console” tab at the top of the Developer Tools panel . Type the following into the console and press the Enter any of the key:
document.designMode = 'on';
document.body.contentEditable = 'true';
Now you can close the console, if you wish, and edit the current web page as if it were an editable document. Click somewhere to insert the cursor and write text. Use the keys Backspace Delete to delete text, images and other elements.
This only changes the way the web page appears in your browser. As soon as you refresh the page, you will see the original one more time. If you go to another web page or tab, it won’t be in design mode until you open the console and retype this line.
You can even go back to the console and run the following command to disable design mode:
document.designMode = 'off'
The web page will no longer be editable, but your changes will be preserved until the next time you refresh the page.
It is not very useful (obviously the edition is locally Edit Any Web Page on your computer, not on the server) and in any case it should not be used in bad faith.
Also Read : 8 Robust Google Chrome Extensions For Bloggers
