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
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.
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.
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.
|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.|
||The previously used tool, or the Welcome tool.|
||The previously used tool, or the Welcome tool.|
|On the Microsoft Edge toolbar, select Settings and more () > More tools > Developer tools.||The previously used tool, or the Welcome tool.|
||The Console tool.|
||The Elements tool, with the DOM tree expanded to show the
||The Elements tool, with the DOM tree expanded to show the
||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:
DevTools opens, with the right-clicked element highlighted in the DOM tree 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:
Have DevTools automatically open when you open a new tab
To have DevTools automatically open whenever you open a new tab in the browser:
At the command line, open Microsoft Edge, passing in the
--auto-open-devtools-for-tabsflag, as follows:
Windows command prompt:
start msedge --auto-open-devtools-for-tabs
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:
Turning off the F12 keyboard shortcut
To prevent pressing
F12 from opening DevTools:
In Microsoft Edge, go to
In the Developer Tools section, turn off the Open the DevTools when the F12 key is pressed toggle.
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.
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:
- If focus isn't already on DevTools, click somewhere in DevTools.
-(Windows or Linux). Or, press
To zoom the rendered page, click the page, and then use the same keyboard shortcuts as above.
To restore zoom to 100%:
- Make sure focus is on the desired part of the browser, either DevTools or the rendered page.
0(Windows or Linux) or
To zoom DevTools Settings:
- In DevTools Settings, click Close (x) in the upper right.
- Change the zoom level of DevTools, as described above.
- Click the Settings () button.
To zoom DevTools by using the Command Menu:
- Click the Customize and control DevTools () menu button, and then select Run command.
- 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.
- Open the Command Menu and then type
Then hover over each outlined region of DevTools:
To turn off Tooltips, press
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.
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.
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
The main toolbar contains the following features:
- Inspect tool () toggle button.
- Device Emulation () button.
- 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.
- More tabs () button.
- More Tools () button.
- Issues counter () button.
- Settings () button.
- Send Feedback () button.
- Customize and control DevTools () menu button.
- Close DevTools () button.
The toolbar features are described below.
When you click the Inspect tool () 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.
Click the Device Emulation () 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.
Includes information about the new features of DevTools, how to contact the team, and provides information about certain features.
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.
In the Console tool, you can:
The Console tool is always present on the main toolbar and on the Drawer toolbar.
The Sources tool is always present on the main toolbar.
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 Fix memory problems.
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 () button.
More Tools button
To add a tool to the toolbar, click the More Tools () button.
A red circle containing an
The Issues counter () 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.
To open the DevTools Settings webpage, click the Settings () button. The Settings page contains the following sub-pages:
- Library Code
- Symbol Server
See Settings in Customize DevTools.
Send Feedback button
To open the Send Feedback dialog, click the Send Feedback () 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.
Customize and control DevTools menu
The 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 () 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 () 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).
|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
In addition to Panel tools and Drawer tools, DevTools includes the following tools:
- The Inspect tool. See Use the Inspect tool to detect accessibility issues by hovering over the webpage.
- The Device Emulation tool. See Emulate mobile devices (Device Emulation).
- The Command Menu. See Run commands with the Microsoft Edge DevTools Command Menu.
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.
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 () button, and then select Run command.
P(Windows, Linux) or
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:
Enter, and then the Changes tool opens:
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
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.
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.
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.
- About the list of tools
- Get started with HTML and the DOM
- Inspect and change the current webpage
- Emulate how your product behaves on different devices
- Inspect, tweak, and change the styles of elements
- Live console
- Accessibility, performance, compatibility, and security issues
- Inspect the network traffic
- Inspect where the browser stored content
- Evaluate the performance
- Memory problems
- Rendering issues
- Use a development environment
- Sync changes in DevTools with the file system
- Override files from the web
Submit and view feedback for