How to edit any webpage in chrome or any modern browser

How to edit any webpage in chrome or any modern browser

Modern browsers support “document.designMode” feature which allows users to edit the webpages like a simple document. No need for an extension or programming knowledge.

Let’s see how to edit any webpage in chrome or any modern browser.

These edits are short-lived i.e. only up to when the pages are refreshed or you move to a new page. It can be used for printing, showing changes to devs and mainly PRANKS 🙂

How is this done?

Open Developer console in the browser you use.

To open the console in Google Chrome, click menu > More Tools > Developer Tools or press Ctrl+Shift+i.

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.

open chrome developer tools

Click the “Console” tab at the top of the Developer Tools panel. Type the following into the console and press Enter:

document.designMode = 'on'

enable design mode in console

You can now edit the current web page as if it was an editable document. Click somewhere to insert or remove text, images, and even other elements. This just changes how the web page appears in your browser. As soon as you refresh the page or move to another URL, the changes will be lost.  Additionally, if you go to another web page or tab, it won’t be in design mode. You will need to open the console and enable design mode.

edit page in the browser using design mode

In this screenshot, you can see I have added “Why We use” to the heading. Similarly, you can add anything or delete the existing contents as you like.

In order to turn off the design mode, you can go back into the console and run the following command to turn design mode off:

document.designMode = 'off'

disable design mode in the chrome developer console
The web page won’t be editable anymore, but your changes will be preserved until you next refresh the page.

This is one of the hundreds of tricks modern browsers support. Hope you like it!