Web pages are just documents that your web browser displays. But what if you could type directly on a webpage to change it? You can not and do not need a browser extension ̵
This feeling when you first discovered "document.designMode" pic.twitter.com/bxA1otzCjN
– Tomek Sułkowski (@sulco) September 27, 2019
With this feature, you can clean up a web page before you print it, test what changes to a web page look like, or even just stroke people. It's like editing a Word document – no HTML handling is required.
To enable this feature, visit a webpage and open the Developer Console. To open the console in Google Chrome, click Menu> Other Tools> Developer Tools or press Ctrl + Shift + I.
While we're using Chrome here as an example, this feature works in other modern browsers as well. To open the console in other browsers:
- In Mozilla Firefox, click Menu> Web Developer> Web Console or press Ctrl + Shift + K.
- In Microsoft Edge, click Menu> Other 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 in the console and press Enter:
document.designMode = & # 39; on & # 39;
You can now close the console and edit the current Web page as if it were an editable document. Click on a place to insert the cursor and enter text. Use the backspace key or Delete key to remove text, images, and other items.
This only changes the appearance of the website in your browser. When you refresh the page, the original is displayed again. If you go to another webpage or tab, it will not be in design mode until you open the console and enter that line again.
You can even go back to the console and run the following command to enable draft mode off:
document.designMode = & # 39; off & # 39;
The webpage can not be edited, but your changes will be preserved until the next time you refresh the page.