Overview of DevTools

The Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools. DevTools is a set of web development tools that appears next to a rendered webpage in the browser. DevTools provides a powerful way to inspect and debug webpages and web apps. You can even edit source files and create website projects, all within the DevTools environment.

With DevTools, you can do the following:

  • Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface. Inspect where the browser stored content to construct the webpage, including .html, .css, .js, and .png file formats.

  • Emulate how your website behaves on different devices and simulate a mobile environment, complete with different network conditions. Inspect the network traffic and see the location of the problems.

  • Debug your JavaScript using breakpoint debugging and with the live console. Find memory problems and rendering issues with your web apps.

  • Find accessibility, performance, compatibility, and security issues in your products, and use DevTools to fix the accessibility issues that are found.

  • Use a development environment to sync changes in DevTools with the file system and from the web.

Open DevTools

In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.

Main ways:

Action Resulting tool
Right-click any item on a webpage, and then select Inspect. The Elements tool, with the DOM tree expanded to show the right-clicked page element.
Press Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS). The previously used tool, or the Welcome tool.
Press F12. The previously used tool, or the Welcome tool.

Additional ways:

Action Resulting tool
On the Microsoft Edge toolbar, select Settings and more (The 'Settings and more' icon.) > More tools > Developer tools. The previously used tool, or the Welcome tool.
Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). The Console tool.
Press Ctrl+Shift+C (Windows, Linux) or Command+Option+C (macOS). The Elements tool, with the DOM tree expanded to show the <body> element.
Press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter. The Elements tool, with the DOM tree expanded to show the <html> element.
Press Tab and Shift+Tab to put focus on a page element. Then press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter. The Elements tool, with the DOM tree expanded to show the focused page element.

Open DevTools by right-clicking an item in a webpage

A good way to open DevTools is to right-click an item on a webpage, and then select Inspect:

To open DevTools, right-click any item on a webpage and then select Inspect.

DevTools opens, with the right-clicked element highlighted in the DOM tree in the Elements tool:

DevTools opens, with the right-clicked element highlighted in the Elements tool.

Open DevTools by using the Microsoft Edge toolbar

On the Microsoft Edge toolbar, you can select Settings and more (...) > More tools > Developer tools:

On the Microsoft Edge toolbar, select 'Settings and more' > 'More tools' > 'Developer tools'.

Have DevTools automatically open when you open a new tab

To have DevTools automatically open whenever you open a new tab in the browser:

  1. At the command line, open Microsoft Edge, passing in the --auto-open-devtools-for-tabs flag, as follows:

    Windows command prompt:

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

    Windows PowerShell:

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"
    

    bash shell on macOS:

    /Applications/Microsoft\ Edge\ Beta.app/Contents/MacOS/Microsoft\ Edge\ Beta --auto-open-devtools-for-tabs
    

    bash shell on Linux:

    microsoft-edge-dev --auto-open-devtools-for-tabs
    

Turning off the F12 keyboard shortcut

To prevent pressing F12 from opening DevTools:

  1. In Microsoft Edge, go to edge://settings/system.

  2. In the Developer Tools section, turn off the Open the DevTools when the F12 key is pressed toggle.

    In Edge Settings, disabling the F12 key for opening DevTools.

Keyboard support

You can interact with DevTools using the mouse or keyboard. Keyboard shortcuts provide a quick way to access functionality, and are needed for accessibility. Various tools are increasingly accessible through the keyboard and assistive technologies such as screen readers.

See Keyboard shortcuts and Navigate DevTools with assistive technology.

Change where DevTools is docked in the browser

You can dock DevTools in the right, left, or bottom of the browser, or undock it into a separate window. See Change DevTools placement (Undock, Dock to bottom, Dock to left).

Zoom DevTools in or out

The DevTools UI is implemented using HTML and CSS, like web pages, so you can zoom in and out by using the standard keyboard shortcuts. The zoom levels for DevTools and the rendered page are independent.

To zoom the DevTools portion of the browser:

  1. If focus isn't already on DevTools, click somewhere in DevTools.
  2. Press Ctrl++ or Ctrl+- (Windows or Linux). Or, press Command++ or Command+- (macOS).

DevTools zoomed out.

To zoom the rendered page, click the page, and then use the same keyboard shortcuts as above.

To restore zoom to 100%:

  1. Make sure focus is on the desired part of the browser, either DevTools or the rendered page.
  2. Press Ctrl+0 (Windows or Linux) or Command+0 (macOS).

To zoom DevTools Settings:

  1. In DevTools Settings, click Close (x) in the upper right.
  2. Change the zoom level of DevTools, as described above.
  3. Click the Settings (Settings icon.) button.

To zoom DevTools by using the Command Menu:

  1. Click the Customize and control DevTools (Customize icon.) menu button, and then select Run command.
  2. In the Command Menu, start typing zoom, and then select a zoom command:
    • Reset zoom level
    • Zoom in
    • Zoom out

Display DevTools Tooltips

The DevTools Tooltips feature helps you learn about all the different tools and panes. Hover over each outlined region of DevTools to learn more about how to use the tool. To turn on Tooltips, do one of the following:

  • Select Customize and control DevTools (...) > Help > Toggle the DevTools Tooltips.
  • Press Ctrl+Shift+H (Windows/Linux) or Cmd+Shift+H (macOS).
  • Open the Command Menu and then type tooltips.

Then hover over each outlined region of DevTools:

DevTools Tooltips.

To turn off Tooltips, press Esc.

Features of the main toolbar

DevTools gives you an amazing amount of power to inspect, debug, and change the website currently displayed in the browser. Most of the tools display the changes live. Live updates make the tools incredibly useful to refine the appearance and navigation or functionality of a web project without the need to refresh or build it.

Tabbed tool panels containing tabs and pages

Other than a couple of icon tools (the Inspect tool and Device Emulation), DevTools is divided into and a set of tabbed tools, such as the Elements tool, the Console tool, and the Sources tool. Within the Command Menu, tools are referred to as panels. A tool's tab contains a panel which contains the tool's UI.

Higher-level tabs:

Tools are organized into a set of tabs on the main toolbar and on the drawer toolbar. Most tools are also called panels. A panel is the inner UI of a tool. A tool has a tab that can be present on the main toolbar and Drawer toolbar.

Lower-level tabs:

Within the panel of some tools, there are one or more sets of tabs (tabbed panes). For example, the Elements tool contains a set of tabs that includes Styles, Event Listeners, and Accessibility tabs. For other tools, the tool's panel has pages listed along the left side.

The main toolbar and the Drawer toolbar

There are two toolbars: the main toolbar at the top of DevTools, and the Drawer at the bottom when you press Esc.

The main toolbar contains the following features:

  • Icon tools:

    • Inspect tool (Inspect tool icon.) toggle button.
    • Device Emulation (Device Emulation icon.) button.
  • Tool tabs:

    • Welcome tool.
    • Elements tool. Permanent.
    • Console tool. Permanent.
    • Sources tool. Permanent.
    • Network tool.
    • Performance tool.
    • Memory tool.
    • Application tool.
    • Security tool.
    • Lighthouse tool.
    • CSS Overview tool.
  • Icons:

    • More tabs (More tabs icon.) button.
    • More Tools (More Tools icon.) button.
    • JavaScript errors counter (JavaScript errors counter icon.) button.
    • Issues counter (Issues counter icon.) button.
    • Settings (Settings icon.) button.
    • Send Feedback (Send Feedback icon.) button.
    • Customize and control DevTools (Customize icon.) menu button.
    • Close DevTools (Close DevTools icon.) button.

The main toolbar, with labels that identify its features.

The toolbar features are described below.

Inspect tool

When you click the Inspect tool (Inspect tool icon.) button, you can select an element on the current webpage. While the Inspect tool is active, you can move your mouse over different parts of the webpage to get detailed information about page elements, along with a multi-color overlay that shows the layout dimensions, padding, and margin of the page element.

The Inspect tool while hovering over with the first headline of this article.

Device Emulation

Click the Device Emulation (Device Emulation icon.) button to display the current website in an emulated device mode. The Device Emulation tool allows you to run and test how your product reacts when you resize the browser. It also gives you an estimation of the layout and behavior on a mobile device.

DevTools display of this article in an emulated mobile phone.

See Emulate mobile devices (Device Emulation).

Welcome tool

Includes information about the new features of DevTools, how to contact the team, and provides information about certain features.

Elements tool

Allows you to inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser.

The Elements tool is always present on the main toolbar.

Console tool

In the Console tool, you can:

  • View and filter logged messages from network requests or from JavaScript log statements.
  • Enter JavaScript statements to evaluate in realtime. Expressions are evaluated in the current context, such as when the JavaScript debugger in the Sources tool is paused at a breakpoint.

The Console tool is always present on the main toolbar and on the Drawer toolbar.

See Console.

Sources tool

The Sources tool is a code editor and JavaScript debugger. You can edit projects, maintain snippets, and debug your current project.

The Sources tool is always present on the main toolbar.

Network tool

The Network tool allows you to monitor and inspect requests or responses from the network and browser cache. You can filter requests and responses to fit your needs and simulate different network conditions.

See Inspect network activity.

Performance tool

See Get started analyzing runtime performance.

Memory tool

See Fix memory problems.

Application tool

See View, edit, and delete cookies.

Security tool

See Understand security issues using the Security tool.

Lighthouse tool

See Lighthouse tool.

CSS Overview tool

Identify potential CSS improvements.

See CSS Overview tool.

More tabs button

To display a tool that's open but hidden because the window is too narrow, click the More tabs (More tabs icon.) button.

More Tools button

To add a tool to the toolbar, click the More Tools (More Tools icon.) button.

JavaScript errors counter

The JavaScript errors counter (JavaScript errors counter icon.) button displays the following:

  • A red circle containing an X, followed by the number of JavaScript errors that were automatically detected on the current webpage.

  • A yellow triangle containing an exclamation mark, followed by the number of JavaScript warnings that were automatically detected on the current webpage.

The tooltip for the JavaScript counter button is Open Console to view # errors, # warnings.

Click the JavaScript errors counter to open the Console and learn about the error.

Issues counter

The Issues counter (Issues counter icon.) button shows the number of HTML or CSS issues that are automatically found on the current webpage.

The tooltip for the Issues counter is Open Issues to view # issues. The button's icon is a blue speech bubble icon followed by the number of HTML or CSS issues.

Click the Issues counter to open the Issues tool.

Settings button

To open the DevTools Settings webpage, click the Settings (Settings icon.) button. The Settings page contains the following sub-pages:

  • Preferences
  • Workspace
  • Experiments
  • Library Code
  • Devices
  • Throttling
  • Locations
  • Shortcuts
  • Symbol Server

See Settings in Customize DevTools.

Send Feedback button

To open the Send Feedback dialog, click the Send Feedback (Send Feedback icon.) button. The Send Feedback dialog opens. Enter information to describe what happened and automatically includes a screenshot. Use Send Feedback to connect with DevTools team to report problems, issues, or suggest ideas.

See Contact the Microsoft Edge DevTools team.

Customize and control DevTools menu

The Customize and control DevTools (Customize and control DevTools) button opens a dropdown menu that enables you to define where to dock DevTools, search, open different tools, and more.

Close DevTools button

Click the Close DevTools (Close DevTools icon.) button in the upper right corner of DevTools to close DevTools and use the entire window to display the current webpage.

Overview of all tools

For a summary of each tool, see Overview of all tools in About the list of tools.

Tool, tab, or panel

Often the words "tool", "tab", or "panel" are used interchangeably. In the Command Menu, the tools are called panels; for example, the Elements tool is called the Elements panel. To switch to the Elements tool, you select the Elements tab. There's a More Tools (+) button and list, and there's a More tabs button on the toolbar, both of which are used to select tools, which are also called panels.

You can customize each of the tools, and the content of a tool can change based on the context.

About Panel and Drawer tools

The tools that are listed in the More Tools (+) can be displayed either as a Panel tool (on the main toolbar) or a Drawer tool (on the Drawer toolbar). In the Command Menu, each of these tools is labelled as either a Panel tool or as a Drawer tool. But you can add them to either the main toolbar or the Drawer toolbar, and you can use any of the following methods to open them or move them between the two toolbars.

Use the More Tools (+) menu to select any of the Panel tools or Drawer tools. A More Tools menu appears in multiple places:

  • In the upper right of DevTools, on the main toolbar, click the Customize and control DevTools (Customize and control DevTools) button, hover over the More tools command, and then select a tool.

  • On the main toolbar at the top of DevTools (where Panel tools usually go).

  • On the Drawer toolbar (where Drawer tools usually go).

Task Steps
Open a tool on the main toolbar at the top of DevTools On the main toolbar at the top of DevTools, click More Tools (+) and then select a tool.
Open a tool on the Drawer toolbar When DevTools has focus, press Esc to show the Drawer. On the Drawer toolbar, click More Tools (+) and then select a tool.
Move a tool from the Drawer toolbar to the main Toolbar When DevTools has focus, press Esc to show the Drawer. On the Drawer toolbar, right-click the tool's tab, and then select Move to top.
Move a tool from the main toolbar to the drawer Toolbar On the main toolbar, right-click the tool's tab, and then select Move to bottom.
Open a tool in its default toolbar When DevTools has focus, open the Command Menu by pressing Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS). Type the name of the tool, and then select the tool.

In addition to Panel tools and Drawer tools, DevTools includes the following tools:

See also

Power tip: Use the Command Menu

DevTools provides lots of features and functionality to use with your website. You can access the different parts of DevTools in many ways, but often a fast way is to use the Command Menu.

the Command Menu in DevTools.

In the Command Menu, the tools are called "panels"; for example, the Elements tool is called the Elements panel. To switch to the Elements tool, you select the Elements tab.

To open the Command Menu, do either of the following:

  • Click the Customize and control DevTools (Customize and control DevTools) button, and then select Run command.

  • Press Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS).

The Command Menu allows you to type commands to display, hide, or run features in DevTools. With the Command Menu open, enter the word changes, and then select Drawer: Show Changes.

The Changes tool opens, which is useful when you edit CSS. In this case, the Command Menu provides a fast alternative to selecting More Tools (...) and then selecting Changes, or editing a .js file in the Sources tool, then right-clicking and selecting Local modifications.

After you type cha, the Command Menu displays the options:

Command menu displays the options after you type 'cha', including 'Show Changes tool in the Drawer'.

Press Enter, and then the Changes tool opens:

DevTools with the Changes tool open.

See also Run commands with the Microsoft Edge DevTools Command menu.

Customizing DevTools

You can customize DevTools to meet your needs for the way you work. To change settings, click Settings (the gear icon on the top right), or press F1.

In the Settings > Preferences page, you can change several parts of DevTools. For example, you can use the Match the browser language setting to use the same language in DevTools that is used in your browser. For another example, use the Theme setting to change the color theme of DevTools.

all the settings in DevTools.

You can also change the settings of advanced features, such as:

  • Add local files to a Workspace.
  • Filter library code with the Ignore List.
  • Define the Devices you want to include in the device simulation and test mode. For more information, see Emulate mobile devices (Device Emulation).
  • Select a network Throttling profile.
  • Define simulated Locations.
  • Customize keyboard Shortcuts. For example, to use the same shortcuts in DevTools as in Visual Studio Code, select Match shortcuts from preset > Visual Studio Code.

All the keyboard shortcuts and the menu to match each to the shortcuts in Visual Studio Code.

Trying experimental features

The DevTools team provides new features as experiments in DevTools. You can turn each of the experiments on or off. To see the full list of Experimental features, in DevTools, select Settings (the gear icon), and then select Experiments.

To preview the latest features coming to DevTools, download Microsoft Edge Canary, which builds nightly.

See also