Enable or Disable Developer Tools F12 Keyboard Shortcut in Microsoft Edge – Windows Blog by Brink

Enable or Disable Developer Tools F12 Keyboard Shortcut in Microsoft Edge

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.

Starting with the Microsoft Edge Canary 89.0.726.0 version, 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.

Read more…