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
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.
- Open your Google Chrome browser
- Visit a Web page
- Click the Menu or Three-Dots on the top right-side corner
- Select the More Tools option from the menu
- Click the Developer Tools option from the submenu
Google Chrome menu > More Tools > Developer Tools (Ctrl+Shift+I)
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.
- Open Google Chrome
- Visit a website page link
- Press the Ctrl+Shift+I
- 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
- Click the Console tab on the Developer Tools
- Type the document.DesignMode = ‘on’ and press the Enter Key
- It bottom it will show you “On”
- 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.
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.
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:
- Click the Consol tab on the Developer tools
- Type the document.designMode = ‘off’ and press Enter key
- Next, it will show you “Off”
- Finally, close the Console
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.
- Click to Open your Google Chrome browser
- Navigate any Webpage you like to change
- Right-click on your website and select the Source code or Inspect Elements
- A new tab of Source code will appear on your screen
Chrome page editing frequent questions:
To inspect any element, right-click and then click on Inspect menu.
Right-click on the website page and click Inspect then click the source code tab.
No, the edit option for temporary testing and mock-up purpose only. The changes stay unless you refresh the page link.
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.
To change colour, right-click to inspect the page and view source code. Scroll to style sheet code and change colour values Hex code.
Yes, using Chrome edit, you can change any website view for the open session only. The changes revert back when you refresh the page.
You can get Google Chrome from directly from here https://www.google.com/chrome/