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 key or by pressing the + + 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
- Debug your script by setting breakpoints and stepping through it line by line
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 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.
- Microsoft Edge (Chromium) Developer Tools | Microsoft Docs
- Microsoft Edge DevTools Keyboard Shortcuts | Microsoft Docs
- Turn off F12 opening DevTools with new Edge setting | Microsoft Edge Insider Articles
This tutorial will show you how to enable or disable the developer tools (DevTools) F12 keyboard shortcut in the Chromium based Microsoft Edge.
EXAMPLE: Developer Tools in Microsoft Edge
Open Microsoft Edge.
Click/tap on the Settings and more (Alt+F) 3 dots menu icon, and click/tap on Settings. (see screenshot below)
Click/tap on System in the left pane, and turn On (default) or Off Open the DevTools when the F12 key is pressed for what you want under Developer Tools in the right pane. (see screenshot below)
If you do not see a left pane, then either click/tap on the 3 bars menu button towards the top left OR widen the horizontal borders of the Microsoft Edge window until you do.