The browser has something in store for every user – from casual users to developers. Edge’s Developer Tools (DevTools) is where you can inspect and modify a webpage’s HTML, view or debug code, etc. The F12 shortcut opens DevTools for Edge in Windows, but you may wish to disable this shortcut for some reason. We’ll learn how to disable F12 for DevTools, but before that, let’s explore this section on the browser.
Options available in Microsoft Edge’s Developer Tools
The Developer Tools section is the go-to area for power users, and here’s why – it contains loads of useful functions. Here are the panels you get in DevTools:
Elements: Inspect accessibility properties, edit CSS and HTML code, event listeners, modify DOM breakpoints.Performance: View the system resources your website needs.Sources: View the website’s state by JavaScript code, step through code, set breakpoints. Also, modify webpage codes here.Console: Inspect DOM nodes and JavaScript objects, run JavaScript objects for the window, and see log messages.Memory: Observe memory resources and compare snapshots from code runtime.Network: Monitor requests and inspect the responses.Security: Where you debug vulnerabilities and troubleshoot HTTPS connections.Lighthouse: Run website audits to improve overall performance, build a PWA, catch bugs, and fix errors.Application: Inspect, edit, and debug service workers its caches, and web app manifests. Also, inspect databases, storage, and caches and manage them.
Disable F12 key for Developer Tools in Edge
The option to go to Developer Tools showed up in Edge Canary and has been a mainstay ever since. It will soon be available for the Edge Stable versions. In this section, I’ll show you how to disable this shortcut.
First, launch Microsoft Edge and press the ALT + F keyboard shortcut. Choose Settings from the menu. Click on System from the left-hand panel and go to the Developer Tools area. This is where you disable or enable the option to Open the DevTools when the F12 key is pressed.
Toggle off the option to disable it. Finally, restart the Microsoft Edge browser. On restarting, press F12, and you’ll notice that it no longer takes you to the Developer Tools screen. Hope this helps.
