قالب وردپرس درنا توس
Home / Tips and Tricks / How to Edit Any Website in Chrome (or any Browser)

How to Edit Any Website in Chrome (or any Browser)



  Google Chrome logo on a gray background with a gear wheel

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 ̵

1; this feature is built into any modern browser.

This feature uses the document.designMode feature, which you can enable through the JavaScript console of your web browser. It was recently highlighted by Tomek Sułkowski on Twitter, but it's so cool that we have to share it with our readers.

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 Apple Safari, click Safari> Preferences> Advanced and Enable "View" menu "Develop" in the menu bar. Then click Develop> Show JavaScript Console.
  • 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.




Source link