How to Edit Web Page Chrome Browser Developer Tools

Edit web page Google Chrome

Inspect element and edit any website page. You can even start editing any web page that isn’t yours. Use Google Chrome browser using developer tools to view source code and edit it. You can manage to quickly edit javascript and inject any element to test any page. Having no editing tools, the Chrome embeds developer tools to inspect the element. However, these changes are for the purpose of test, mockup, and demonstration. Any changes in developer tools will revert back to original when you refresh the page.

Scrolling through these contents, you will learn about how to edit a Web page on Google Chrome browser while using developer tools. A web page is like documents which display by your web browser. Maybe you know that you can edit directly the web page without any browser extension. However, it is a modern feature built into every modern browser. In addition, you can edit someone else web page with the help of using Developer Tools.

For instance, the editing browser and developer tools method using below from Google Chrome browser. But the developer tools or web console available in all browsers including Microsoft Edge, Safari, Mozilla Firefox, and Opera. Therefore, you can enable edit features on a web page any browser you want. And you will be able to edit source code, scripts, and text.

Advantages of Edit Feature on Browsers

The advantages of Chrome Editing tools to edit any web page without external software or extension. You can take advantage of the “Document Design Mode” this feature will able you to open the JavaScript console while using your web browser.

Furthermore, you can change the design, and website look. Change any colour, fonts weight, line height, and tags to view look directly in the chrome. It is how source code and element inspection allow viewing changes before you apply permanently. And most developers find this way easier to manage changes and result before implementation.

Using Chrome browser, you do not require to have access to any special scripts, styles sheets, template or back-end server code of the customer site support to see how the front-end is built. These tools give you easy and quick access.

Easily you could use this feature to edit, delete or remove up a web page before going to printing it, change any web page for test how will look or you can edit a web to just prank people. The editing of the web page looks like editing a Word document because nothing will mess with the HTML coding required.

Printing any website, you can easily remove any element from a webpage. Any blocks and ads to remove prior to print a webpage.

How to Enable Edit Feature Web Page on Google Chrome

Open Google Chrome browser and then visit the link to open a web you want to edit. Activate the developer mode to inspect the element and view source code from console tools. Follow the instructions with the steps below.

Method 1: Activate Edit Feature from Chrome menu

Open console tools on Google Chrome as following steps to edit a page.

  1. Open your Google Chrome browser
  2. Visit a Web page
  3. Click the Menu or Three-Dots on the top right-side corner
  4. Select the More Tools option from the menu
  5. Click the Developer Tools option from the submenu
Enable Edit Web Page on your Browser

Google Chrome menu > More Tools > Developer Tools (Ctrl+Shift+I)

Right Click on Web page to open Developer tools

Alternatively, you can right-click on any element on the web page then click Inspect.

Method 2: Use Shortcut keys to open edit a web page on Chrome

Here are some available shortcuts in the Google Chrome to open the developer console to edit a web page.

  1. Open Google Chrome
  2. Visit a website page link
  3. Press the Ctrl+Shift+I
  4. Your Console will open the right side of your web page

Similarly, the above feature is also available and working in other modern browsers.

How to Turn on Edit Feature on Web Page

The Developer Tools panel will open to the right side of your screen to the edit the web page then follow the below

  1. Click the Console tab on the Developer Tools
  2. Type the document.DesignMode = ‘on’ and press the Enter Key
  3. It bottom it will show you “On”
  4. Finally, close the Console

If you are getting Uncaught SyntaxError: Invalid or unexpected token it is likely the page restrict for public design mode. However, you can directly inspect the element to change it in source code.

Click Console on Developer Tools

After that, close the console if you would like to edit the currently open web page as if it was an editable document mode. You can edit elements similarly as Word document. You need to click anywhere to insert your mouse cursor and edit or type text. While you can use delete or Backspace to delete images, text, and other elements.

Edit Feature Enabled

Above all changes, you made these only show you how the web page appears in your browser. When you refresh the web page, then it will appear on the original page tab once again. During this process, if you open another tab or web page, in the new tab the design mode will not show until you open the console and type to enter the line again.

Turn Off the Edit Mode on Web Page on Browser

When you finished the editing process and want exit then follow steps below:

  1. Click the Consol tab on the Developer tools
  2. Type the document.designMode = ‘off’ and press Enter key
  3. Next, it will show you “Off”
  4. Finally, close the Console
Turn Off the Edit Web page Feature

After that, you will not edit anymore on the web page, but the changes you made will be saved until your web page refresh.

In conclusion, to summarize the above contents regarding edit a web page directly on your Google Chrome browser. While you can learn about a similar feature in other browsers too.

You can easily view page source code, and element. Easily inspect each element in console DOM dock. Furthermore, easily view source and network of any website. With design mode on, you can edit any page as a document page.

Alternative Ways to Open Edit Web page Feature on Google Chrome

Here are some of the alternative methods to navigate developer tools and web console to able you directly access your web page for editing without any browser extension.

How do I edit the source code of a web page in Chrome?

To directly edit the source file in the Chrome browser you need lunch Developer tools > Open Chrome > load a web page from your local server/system and from the tools menu click to open Developer Tools.

You can also use the shortcut’s command on your keyboard by press Ctrl+Shift+I or Cmd+Shift+I. it will make you able to edit your web page for printing after you want to delete something.

How do I edit a Web page with inspect element?

The second Method Appearing to edit features a Website with Chrome browser. You need to find the photo or text first you want to edit. Open website page in Chrome you want to appear to change. Right-click within the page, a menu will appear and select the Inspect Element option. In the Inspect Element find the content or text you want to change.

How do I view HTML code in Chrome?

Learn step by step instructions to view HTML code and how to edit in the following steps.

  1. Click to Open your Google Chrome browser
  2. Navigate any Webpage you like to change
  3. Right-click on your website and select the Source code or Inspect Elements
  4. A new tab of Source code will appear on your screen

Chrome page editing frequent questions:

How to inspect any element on a web page?

To inspect any element, right-click and then click on Inspect menu.

How can I see the source code of the website?

Right-click on the website page and click Inspect then click the source code tab.

Can I edit permanently any page on Chrome editor?

No, the edit option for temporary testing and mock-up purpose only. The changes stay unless you refresh the page link.

How to change the font size of any page on Chrome?

Right-click on the page to inspect, then highlight the text to see the font size. Change font value to reflect on the page. These changes are temporary and just for an open session only.

How to change webpage colour on Chrome browser?

To change colour, right-click to inspect the page and view source code. Scroll to style sheet code and change colour values Hex code.

Is it possible to change someone else website?

Yes, using Chrome edit, you can change any website view for the open session only. The changes revert back when you refresh the page.

Where to get Chrome?

You can get Google Chrome from directly from here https://www.google.com/chrome/

Read More:

By Umar Ali

Umar Ali is a passionate content writer. He feeds many blogs with his unique content. He loves creating contents tutorial content. And contribute many guest articles on different websites.

Leave a comment

Your email address will not be published. Required fields are marked *