Browsers and Mail Enable or Disable Developer Tools F12 Keyboard Shortcut in Microsoft Edge

Microsoft_Edge.jpeg

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.
See also:
Starting with the Microsoft Edge Canary 89.0.726.0 and Dev 89.0.731.0 versions, you can now turn on or off Open the DevTools when the F12 key is pressed in System settings.

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
Microsoft_Edge_developer_tools.png



Here's How:

1 Open Microsoft Edge.

2 Click/tap on the Settings and more (Alt+F) 3 dots menu icon, and click/tap on Settings. (see screenshot below)

Microsoft_Edge_settings.jpg

3 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.


Microsoft_Edge_developer_tools_F12.png


That's it,
Shawn Brink


 

Attachments

  • microsoft_edge_chromium.png
    microsoft_edge_chromium.png
    28 KB · Views: 36
Last edited:
Top