A web page is simply a document displayed by your web browser. But what if you could modify it by typing it directly on any web page? You can, and you don't need a browser extension – it's a feature built into every modern browser.
This feature makes use of the "document.designMode" feature, which you can enable through your web browser's JavaScript console. Tomek Sukowski recently highlighted it on Twitter, but it was so cool that we had to share it with our readers.
You can use this feature to clean up web pages before printing, test how web page changes look, or even just prank. Just like editing a Word document – there's no need to mess with HTML.
To activate this feature, visit the webpage and open the Developer Console. To open the console in Google Chrome, click the menu >More Tools> Developer Tools or press Ctrl+Shift+i.
While we're using Chrome as an example here, this feature works with other modern browsers as well. Here's how to open the console in another browser:
In MozillaFirefox, click the menu> Web Developer> Web Console or press Ctrl+Shift+K. In AppleSafari, click Safari> Preferences> Advanced and enable "Show development menu in menu bar". Then, click on the development > to display the JavaScript console. In Microsoft Edge, click Menu >More Tools > Developer Tools or press F12 and click the Console tab.
Click the Console tab at the top of the Developer Tools panel. Enter the following in the console and press Enter:
document.designMode='On'
If you wish, you can now close the console and edit the current web page as if you were an editable document. Click somewhere to insert the cursor and type text. Use the Backspace or Delete keys to delete text, images, and other elements.
This only changes the way the web page appears in the browser. After refreshing the page, you will see the original page again. If you go to another webpage or tab, it won't be in design mode until you open the console and type this line again.
You can even go back to the console and run the following command to turn off design mode:
document.designMode='Close'
The page will no longer be editable, but your changes will be preserved until the next time you refresh the page.