Microsoft Edge Developer Tools overview
When you install Microsoft Edge (Chromium), you get a browser. Also, you get a powerful way to inspect, debug, and even create web projects. The Developer Tools shipped with the browser are based on the tools in the Chromium open-source project, so you may already be familiar with the tools. The
Microsoft Edge Developer Tools are also referred to as
Microsoft Edge DevTools, or simply
Here are some of the main tasks you can do with DevTools:
- Inspect and change the current webpage live in the browser.
- Emulate how your product behaves on different devices and simulate a mobile environment, complete with different network conditions.
- Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface.
- Find accessibility, performance, compatibility, and security issues in your products and learn how to use DevTools to fix each.
- Inspect the network traffic and review the location of the problems.
- Inspect where the browser stored content in various formats.
- Evaluate the performance of your product to find memory problems and rendering issues.
- Use a development environment to sync changes in DevTools with the file system and override files from the web.
To open and explore DevTools, do any of the following:
- Hover on any element on the webpage, open the context menu (right-click), and then select Inspect. DevTools opens, with the Elements tool selected.
Ion Windows/Linux or
There are two main ways to interact with the DevTools.
- Use the mouse.
- Keyboard shortcuts. These provide a quick way to access functionality and are needed for accessibility. The Microsoft Edge DevTools team works hard to make all the tools available using the keyboard and assistive technologies such as screen readers. See Microsoft Edge DevTools keyboard shortcuts.
See also Open Microsoft Edge DevTools - how to open the different features in DevTools.
Changing where DevTools is docked in the browser
When you open the DevTools, it docks to the left of your browser. To change the docked location of DevTools:
- Select the Customize and control DevTools (
- To the right of Placement of the DevTools relative to the page (Dock side), select a layout option.
In Dock side, select a layout option:
- Undock into separate window. Helps you work with several monitors or if you need to work on a full screen app.
- Dock to left or Dock to right. Helps you keep the DevTools side by side with your web product, and is excellent when you emulate mobile devices. The Dock to left and Dock to right options work best with high-resolution displays. For more information about emulation devices, navigate to Emulate mobile devices in Microsoft Edge DevTools.
- Dock to bottom. Helps you when you do not have enough horizontal display space, or you want to debug long text in the DOM or Console.
The main tools on the toolbar
DevTools give you an amazing amount of power to inspect, debug, and change the web product 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. The DevTools also allow you to change web-based third-party products on your computer.
Main tools (tabs) on the toolbar
There are two toolbars: the main toolbar at the top of DevTools, and the Drawer at the bottom if you select
Esc. The main toolbar normally has the following tabs (or tools, or panels):
- Welcome. Includes information about the new features of DevTools, how to contact the team, and provides information about certain features. This tool is placed first.
Next, the following tools are always present on the toolbar and cannot be closed:
- Elements. Allows you to edit or inspect HTML and CSS. You can edit in the tool while displaying the changes live in the browser.
- Network. 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.
Finally, these more specialized tools (tabs) are on the toolbar by default:
Tool, tab, or panel
Often the words "tool", "tab", or "panel" can be 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 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.
Sections of the toolbar
The main toolbar in DevTools has the following sections:
When you select the Inspect tool, 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, and a multi-color overlay that shows the layout dimensions, padding, and margin of the page element.
The Device Emulation tool displays the current web product 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.
The main toolbar contains tabs for tools that are used in various scenarios. You can customize each of the tools, and the content of a tool can change based on the context. To show a tool that is on a tab that's hidden, select the More tabs (
>>) button. To add a tool to the main toolbar or to the drawer's toolbar, select the More tools (
+) button. Each tool is introduced below.
The Settings button displays a gear icon. To open DevTools Settings webpage, select the Settings button. The Settings webpage displays a menu to change Preferences, turn on Experiments, and much more.
The Send Feedback button displays a torso with a chat bubble next to it. To open the Send Feedback dialog, select the Send Feedback button. The Send Feedback dialog allows you to enter information to describe what happened and automatically includes a screenshot. Use it to connect with the DevTools team to report problems, issues, or suggest ideas.
The Customize and control DevTools (
...) button opens a dropdown menu. It allows you to define where to dock the DevTools, search, open different tools, and much more.
Power tip: Use the command menu
The DevTools provides lots of features and functionality to use with your web product. You can access the different parts of the 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 the Elements tool, you select the Elements tab.
To open the command menu, do any of the following:
P(Windows, Linux) or
- Select Customize And Control DevTools (
...), and then select Run Command.
The command menu allows you to type commands to display, hide, or run features in the 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.
The command menu displays the options after you type
DevTools with the Changes tool open:
You can customize DevTools to meet your needs for the way you work. To change settings, do any of the following:
- Select Settings (the gear icon on the top right).
In the Preferences section, you can change several parts of the DevTools. For example, you can use the Match the browser language setting to use the same language in the 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:
Filter library code with the Ignore List.
Define the Devices you want to include in the device simulation and test mode. For more information, navigate to Emulate mobile devices in Microsoft Edge DevTools.
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.
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.