If you’re like most people, you probably edit web pages in your browser, not in a dedicated editor. But there are plenty of good editors out there, and Chrome has its own built-in one. In this article, we’ll show you how to use it 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.
— 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.
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 like, and edit the current web page as if it was an editable document. Click somewhere to insert your cursor and type text. Use the Backspace or Delete keys to remove text, images, and other elements.
This just changes how the web page appears in your browser. As soon as you refresh the page, you’ll see the original once again. If you go to another web page or tab, it won’t be in design mode until you open the console and type this line once again.
You can even go back into the console and run the following command to turn design mode off:
The web page won’t be editable anymore, but your changes will be preserved until you next refresh the page.
