Open Microsoft Edge DevTools

There are many ways to open Microsoft Edge DevTools, helping you quickly access different parts of the DevTools UI.

Open Microsoft Edge DevTools

To open DevTools, use either of the following options.

  • Use the Microsoft Edge UI.

    • Choose the Settings and more (...) icon > More Tools > Developer Tools.
  • Use the keyboard.

    • Select F12 or Control+Shift+I (Windows, Linux) or Command+Option+I (macOS).

For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

Open DevTools from the Microsoft Edge main menu

Open the Elements panel to inspect the DOM or CSS

Either of the following tasks allow you to inspect the styles or attributes of a Document Object Model (DOM) node.

  • Hover on the element, open the contextual menu (right-click), and choose Inspect.
  • Select Control+Shift+C (Windows, Linux) or Command+Option+C (macOS). For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

Open the Console panel

To open the Console panel to view logged messages or run JavaScript, select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS). For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

Open the previous panel

To jump to the previously open panel, select Control+Shift+I (Windows, Linux) or Command+Option+I (macOS). For more information, navigate to Microsoft Edge DevTools keyboard shortcuts.

Auto-open DevTools on every new tab

To auto-open DevTools on every new tab, open Microsoft Edge from the command line and pass the --auto-open-devtools-for-tabs flag.

start msedge --auto-open-devtools-for-tabs

Toggle the F12 keyboard shortcut on or off

To change the F12 keyboard shortcut setting that opens the DevTools, complete the following actions:

  1. Navigate to edge://settings/system.

  2. In Developer Tools, choose Open the DevTools when the F12 key is pressed to toggle the setting to off or on. Toggle the setting to off to stop the F12 keyboard shortcut from opening DevTools.

  3. After you set the toggle to off, verify that F12 no longer opens DevTools.

    Note

    After turning off Open the DevTools when the F12 key is pressed, perform one of the following actions to open the DevTools.

    • Select Ctrl+Shift+I.
    • Open the contextual menu (right-click) > Inspect.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.