Edit page? Use Developer Tools Microsoft Edge

Edit any page Edge browser console

Microsoft Edge’s Developer Tools feature in window 10 authorizes you to edit a web page on your browser. So the developer tools give you direct access to the console without any browser extension. This is a very useful function and available in all modern browsers like Safari, Mozilla Firefox, and Google Chrome. Because the Web pages are just like document displays on your web browser. You can directly edit the web page for your personal use and for the test how to look like appearing on your browser.

Microsoft Edge Developer Tools are not only for web developers. They present you a lot of advantages to you such as front end mockup, content mangers, including marketers, designers, SEOs and bloggers. Non-tech people can get advantages to print contents after removing elements from the print area.

Don’t worry, if you are exploring it for the first time. The first time the developer tools look like a bit daunting, later on, it is worth getting to teach a few tricks, as they will more improve your communication, efficiency with developers, and your understanding of website coding or content issues.

But in this tutorial, you will learn open developer or web consol in Microsoft Edge on Windows 10.  After that, you will take advantage of the command of the “document.designMode” feature it will take you to the editor console while using your browser.

How to Activate the Edit Web page Microsoft Edge

To activate the Edit web page feature on your browser follow the steps below.

  1. Open your Microsoft Edge browser
  2. Visit any Web Page on your browser
  3. Click the Three-dots or Menu at the top right side of your screen
  4. Select the More Tools from the menu
  5. Click the Developer Tools
  6. Simply press the F12 key on your keyboard then the web console will open directly
  7. Right-click on your mouse anywhere on your page and then click the Inspect Elements
Open Developer Tools or Edit Web page Feature on Microsoft Edge
Microsoft Edge Browser menu Developer Tools

How to start Editing Web Page on Browser

When you open the developer tools on your browser to the right side in the small window then follow the steps to start editing on your page

  1. Click the Console Tab
  2. Type the “document.designMode =  ‘on’ and then press Enter Key
  3. In the next line, you will see the On
  4. So it’s mean you can edit your page
  5. Close the Web Console
  6. If the page editable then start the editing by click to insert the cursor anywhere
  7. You can delete, remove or edit the text on your page while using the Backspace and delete keys on your keyboard
Developer Tools and browser Console
Edge browser Console to turn on document.designMode=on

Type document.designMode = on to turn on document designing directly from the console. It will let you click anywhere on the page to edit the element. Such as text, color, font, and size.

Editable Mode of the Web page
Edit web page contents

Edit headlines as you type using design mode on Edge browser.

Turn off the Browser Console on a Web page

When you finish the editing process and you want to close the browser console then follow the below steps

  1. Open the Browser Console again
  2. Click the Console tab
  3. Type the document.designMode = ‘off’ and then press the Enter key
  4. In the next line, you will see the Off
  5. So you browser console will Turn off
  6. Close the window of browser console
Turn off the Browser console and Edit web page feature
Edge browser console document.designMode off

When you close then you will not able to edit or delete anymore from the web page, but the changes on the page you made will remain until your web page refresh.

Refersh Orignal Mode again
Edit the page element of any website page

Alternative ways to open the Browser Console or Developer Tools

Let’s show some of the other methods to edit a web page through a browser console. So here is the following one by one.

How do I Debug and Developer Tools in edge browser

In edge to open the debugger feature then follow the steps below

  1. Right-click on your web page background
  2. Click the View Source from the menu
  3. Select on the debug tab on your web console
  4. Click Consol tab
  5. Press the F12 button your keyboard
  6. Type the command location Reload (). The page script will re-execute, authorizes you to step through your code.

How do I open the console in Microsoft edge?

To open the Console Developer Tools on the Microsoft Edge browser, click the right button and select the Inspect Element. You can use the F12 shortcut key on your keyboard just by pressing to access the developer tool mode window. Then click the console tab on the top of the window to navigate.

How do I inspect in edge browser

Other specific options of the Developer like Inspect Element and View Source and you can use the shortcut of like Ctrl+Shift+I or F12 on your keyboard to open the Web console window.

How do I access my browser console?

There are two ways to open the Browser Console: Select the Developer Tools submenu of More Tools. Another way from the keyboard: Press the Ctrl+Shift+J then you will access the Browser Console. On a Mac or iOS, you need to Cmd+Shift+J or Ctrl+Shift+J.

Inspect Elements or Developer tools on Microsoft Edge

To open the Inspect Elements on Microsoft Edge browser then click the Alt+X keys on your keyboard. Then select the More Tools option and Developer tool from the submenu then browser console will open on your browser.

Read More:

Categorized as Tech

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.