How to Enable or Disable Developer Tools in Microsoft Edge Chromium


Microsoft has adopted the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility. This new Microsoft Edge runs on the same Chromium web engine as the Google Chrome browser, offering you best in class web compatibility and performance.

The new Chromium based Microsoft Edge is supported on all versions of Windows 7, Windows 8.1, Windows 10, Windows Server (2016 and above), Windows Server (2008 R2 to 2012 R2), and macOS.

You can open Microsoft Edge Developer Tools (DevTools) by pressing the F12 key or by pressing the Ctrl + Shift + i keys.

The Microsoft Edge Developer Tools are a set of tools built directly into the Microsoft Edge browser. With these DevTools, you are able to do the following.

  • Inspect and make changes to your HTML website
  • Edit CSS and instantly see preview how your website renders
  • See all the console.log() statements from your front-end JavaScript code
  • Debug your script by setting breakpoints and stepping through it line by line

all directly within the browser. These are just examples of some of the features the DevTools provide to make it easier and faster for you to build and test your websites in Microsoft Edge.

The Microsoft Edge (Chromium) DevTools include the following panels.

  • An Elements panel to edit HTML and CSS, inspect accessibility properties, view event listeners, and set DOM mutation breakpoints
  • A Console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript in the context of the selected window or frame
  • A Sources panel to open and live edit your code, set breakpoints, step through code, and see the state of your website one line of JavaScript at a time
  • A Network panel to monitor and inspect requests and responses from the network and browser cache
  • A Performance panel to profile the time and system resources required by your site
  • A Memory panel to measure your use of memory resources and compare heap snapshots at different states of code runtime
  • An Application panel to inspect, modify, and debug web app manifests, service workers, and service worker caches. You may also inspect and manage storage, databases, and caches from the Application panel.
  • A Security panel to debug security issues and ensure that you have properly implemented HTTPS on your website. HTTPS provides critical security and data integrity for both your site and your users that provide personal information on your site.
  • An Audits panel (now renamed Lighthouse) to run an audit of your website. The results of the audit help you improve the quality of your site in the following ways.
    • Catch common errors related to making your website accessible, secure, performant, and so on.
    • Fix each error.
    • Build a PWA.

If you like, you can use the DeveloperToolsAvailability policy to enable or disable developer tools in Microsoft Edge for all users on the computer.

See also:

This tutorial will show you how to enable or disable developer tools (DevTools) in the Chromium based Microsoft Edge for all users on the computer.

You must be sign in as an administrator to enable or disable developer tools in Microsoft Edge.


EXAMPLE: Developer Tools in Microsoft Edge
How to Enable or Disable Developer Tools in Microsoft Edge Chromium-microsoft_edge_developer_tools-1.png How to Enable or Disable Developer Tools in Microsoft Edge Chromium-microsoft_edge_developer_tools-2.png



Here's How:

The downloadable .reg files below will add and modify the DWORD value in the registry key below.

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge

DeveloperToolsAvailability DWORD

(delete) = Enable
2 = Disable


1 Do step 2 (enable) or step 3 (disable) below for what you would like to do.


2 To Enable Developer Tools in Microsoft Edge for All Users

This is the default setting.

A) Click/tap on the Download button below to download the file below, and go to step 4 below.

Enable_developer_tools_in_Microsoft_Edge.reg

Download


3 To Disable Developer Tools in Microsoft Edge for All Users

A) Click/tap on the Download button below to download the file below, and go to step 4 below.

Disable_developer_tools_in_Microsoft_Edge.reg

Download


4 Save the .reg file to your desktop.

5 Double click/tap on the downloaded .reg file to merge it.

6 When prompted, click/tap on Run, Yes (UAC), Yes, and OK to approve the merge.

7 If Microsoft Edge is currently open, then close and reopen Microsoft Edge to apply.

8 You can now delete the downloaded .reg file if you like.


That's it,
Shawn


Related Tutorials



  • Windows 11 Tutorials