How to Edit Any Web Page in Chrome (or Any Browser)
Web pages are just documents your web browser displays. But what if you could type directly on any web page to modify it? You can, and you don’t need a browser extension—it’s a feature built into every modern browser.
This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console. It was recently highlighted by Tomek Sułkowski on Twitter, but 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 could use this feature to clean up a web page before printing it, test how changes to a web page will look, or even just prank people. It’ll be just like editing a Word document—no messing with HTML required.
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.
While we’re using Chrome as an example here, this feature works in other modern browsers, too. 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 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.
