Super practical! A Line of Code Changes The Browser to Web Editor

This is a super practical trick!

A line of code changes the browser to web editor, which support a variety of common browsers. Keep reading!

Just need a piece of code, you can open the Google Chrome built-in developer tool editor function, then directly within the page content editing test. Which is useful for web developers, especially when you want to know the menu can accommodate how many words, or the title, the text will be in the number of words after the line, you can more intuitive way to see the results.

In fact, this trick is not limited to Chrome browser, almost all kinds of common browsers can use, including Firefox, Opera or Safari. However, “developer tool” function in the menu of the different browser in different locations, you can find them on google.

Each time you using the editor will not affect the operation of the site, only you can see the results.

How to change browser to web editor?

1. Open Google Chrome, go to developer tool via the shortcut Ctrl + Shift + I, or directly from the “More Tools” menu.

2. The developer tool will be displayed in the browser below, you can adjust to the appropriate location, click on the top of the menu “Console” switch to the console function.

google browser developer tool-1

3. Then enter the following command line:

document.designMode = 'on'

After Input the command line and press “Enter”, if the response “on” which means that has been successfully opened.

After my test, Firefox will ask the user to enter a command to allow editing before entering the order, to avoid the user without the knowledge of the case may lead to security problems in the code. But this part of Google Chrome is no restrictions, directly to copy the code then paste can be done.

A Line of Code Changes The Browser to Web Editor

4. After entering the command: document.designMode = ‘on’, you can try to select the text part of the page, even delete it directly.

Enjoy it!

Shared by: Jan Östlund