To activate this feature, visit the web page and open the developer console. To open the console in Google Chrome , click Menu > More Tools > Developer Tools, or press Ctrl + Shift + i .
Take Chrome here as an example, this feature can also be used in other modern browsers . The method to open the console in other browsers is as follows:
- In Mozilla Firefox , click Menu > Web Developer> Web Console, or press Ctrl + the Shift + K .
- In Apple Safari , click Safari> Preferences > Advanced, and then enable " Show Development Menu in Menu Bar " . Then, click Development > 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 . Enter the following in the console and press Enter :
document.designMode = 'on'
Now, you can close the console as needed, and edit the current web page as an editable document. Click somewhere to insert the cursor and type text. Use Backspace or Delete key to delete text, images and other elements.
This just changes the way the web page is displayed in the browser. After refreshing the page, you will see the original page again. If you go to another webpage or tab, it will only be in design mode after you open the console and type this line again.
You can even return to the console and run the following command to turn off design mode:
document.designMode = 'off'
The page will no longer be editable, but your changes will be kept until you refresh the page next time.
