How to edit any webpage in Chrome (or any browser)
Web pages are only documents displayed by your web browser. But what if you could type directly on any web page to edit it? You can, and you don’t need a browser extension, it’s a feature built into every modern browser.
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 the appearance of changes to a web page, or even just play a prank on people. It will be like editing a Word document: no problem with HTML is required.
To enable 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.
While we are using Chrome as an example here, this feature works in other modern browsers, too much. Here’s how to open the console in other browsers:
- In Mozilla Firefox, click menu> Web Developer> Web Console or press Ctrl + Shift + K.
- In Microsoft Edge, click menu> More tools> Developer tools or press F12, then click the “Console” tab.
Click the “Console” tab at the top of the Developer Tools panel. Type the following into the console and press Enter:
You can now close the console, if you wish, and edit the current web page as if it were an editable document. Click somewhere to insert your cursor and type some text. Use the Backspace or Delete keys to delete text, images, and other items.
It just changes the way the web page appears in your browser. As soon as you refresh the page, you will see the original again. If you go to another webpage or tab, it won’t be in design mode until you open the console and enter that row again.
You can even go back to the console and run the following command to turn off design mode:
The web page will no longer be editable, but your edits will be retained until the next page refresh.