About the list of tools
DevTools provides 35 tools:
- 2 toolbar icons, for the Inspect tool (
) and Device Emulation (
). - 3 permanent toolbar tabs, for the Elements, Console, and Sources tools.
- 30 optional toolbar tabs, for the optional tools.
The default tools, including toolbar icons, toolbar tabs, and tools on the More tabs (
) menu:
The optional tools that aren't open by default, on the More Tools (
) menu:
The following features are additional ways to access the tools:
- The Drawer is an additional toolbar and area to hold tool tabs.
- The Command Menu is a way to directly use features of tools.
- The Settings pages can turn on additional features of tools.
Overview of all tools
Microsoft Edge DevTools includes the following tools.
| Tool | Purpose | Article |
|---|---|---|
| 3D View tool | Explore the web page translated into a 3D perspective. Debug your webpage by navigating through the DOM or z-index stacking context. | Navigate webpage layers, z-index, and DOM using the 3D View tool |
| Animations tool | Inspect and modify CSS animation effects by using the Animation Inspector in the Animations tool. | Inspect and modify CSS animation effects |
| Application tool | Use the Application tool to manage storage for web app pages, including manifest, service workers, local storage, cookies, cache storage, and background services. | The Application tool, to manage storage |
| Changes tool | Tracks any changes you've made to CSS or JavaScript in DevTools. Shows you what changes to make to your actual source files after you use DevTools to modify your webpage files sent from the server. | Track changes to files using the Changes tool |
| Console tool | An intelligent, rich command line within DevTools. A great companion tool to use with others tools. Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | Console overview |
| Coverage tool | Help you find unused JavaScript and CSS code, to speed up your page load and save your mobile users cellular data. | Find unused JavaScript and CSS code with the Coverage tool |
| CSS Overview tool | Help you better understand your page's CSS and identify potential improvements. | CSS Overview tool |
| Detached Elements tool | To increase the performance of your page, this tool finds detached elements that the browser cannot garbage-collect, and identifies the JavaScript object that is still referencing the detached element. By changing your JavaScript to release the element, you reduce the number of detached elements on your page, increasing page performance and responsiveness. | Debug DOM memory leaks with the Detached Elements tool |
| Developer Resources | Shows resource URLs for the webpage. | Developer Resources tool |
| Device Emulation | Use the Device Emulation tool, also called Device Simulation Mode or Device Mode, to approximate how your page looks and responds on a mobile device. | Emulate mobile devices (Device Emulation) |
| Elements tool | Inspect, edit, and debug your HTML and CSS. You can edit in the tool while displaying the changes live in the browser. Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | Inspect, edit, and debug HTML and CSS with the Elements tool |
| Inspect tool | Use the Inspect tool to see information about an item within a rendered webpage. When the Inspect tool is active, you hover over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | Analyze pages using the Inspect tool |
| Issues tool | The Issues tool automatically analyzes the current webpage, reports issues grouped by type, and provides documentation to help explain and resolve the issues. | Find and fix problems using the Issues tool |
| JavaScript Profiler tool | This tool has been replaced by the Performance tool and the Memory tool. | JavaScript Profiler tool |
| Lighthouse tool | Use the Lighthouse tool to identify and fix common problems that affect your site's performance, accessibility, and user experience. | Lighthouse tool |
| Media tool | Use this tool to view information and debug the media players per browser tab. | View and debug media players information |
| Memory tool | Find memory issues that affect page performance, including memory leaks, memory bloat, and frequent garbage collections. | Fix memory problems |
| Memory Inspector tool | Inspect JavaScript ArrayBuffer with the Memory Inspector. | Inspect a JavaScript ArrayBuffer with the Memory Inspector tool |
| Network tool | Use the Network tool to make sure that resources are being downloaded or uploaded as expected. Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | Inspect network activity |
| Network conditions tool | Use the Network conditions tool to disable the browser cache, set network throttling, set the user agent string, and set Content-Encodings such as deflate, gzip, and br. | Network conditions tool |
| Network Console tool | Use the Network Console tool to make changes to network requests (network calls) to see why they fail. Change and replay any of the network requests, and make detailed network API calls. | Network Console tool |
| Network request blocking tool | Use the Network request blocking tool to test blocking network requests to a specified URL pattern and see how a webpage behaves. | Network request blocking tool |
| Performance tool | Analyze runtime performance, which is how your page performs when it's running, as opposed to loading. | Introduction to the Performance tool |
| Performance monitor tool | Provides a real-time view of the runtime performance of a webpage, to determine where performance problems come from, making a website run slowly. Finds whether problems are from high memory or CPU usage, too-frequent layout and style calculations, or too many DOM nodes and event listeners. | Measure runtime performance of a page using the Performance monitor tool |
| Quick source tool | Use the Quick source tool to display or edit source files when using a tool other than the Sources tool. | Display or edit source files using the Quick source tool |
| Rendering tool | Use the Rendering tool to see what your webpage looks like with different display options or vision deficiencies. | Rendering tool, to see what a webpage looks like with different display options or vision deficiencies |
| Search tool | Use the Search tool to find specific source files for a webpage, including HTML, CSS, JavaScript, and image files. | Find source files for a page using the Search tool |
| Security tool | Inspects the security of a page. | Understand security issues using the Security tool |
| Sensors tool | Simulates different device orientations. | Simulate device orientation with the Sensors tool |
| Source Maps Monitor tool | Use the Source Maps Monitor tool to monitor your source maps. | Source Maps Monitor tool |
| Sources tool | Use the Sources tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | Sources tool overview |
| WebAudio tool | Use the WebAudio tool to monitor WebAudio traffic. The WebAudio tool uses the WebAudio API. | WebAudio tool |
| WebAuthn tool | Use the WebAuthn tool to create and interact with software-based virtual authenticators. | Emulate authenticators and debug WebAuthn |
| Welcome tool | The Welcome tool opens when you first open DevTools. It displays links to developer docs, latest features, Release Notes, and an option to contact the Microsoft Edge DevTools team. | Welcome tool |
The More Tools menus
The More Tools (+) menu on the main toolbar and on the Drawer toolbar is dynamic: it omits any tab tools that are open on that toolbar.
The More tools menu in the Customize and control DevTools (
) menu is static: it always lists all of the optional tools. The selected tool opens in the main toolbar if it's a Panel tool, or on the Drawer if it's a Drawer tool. You can right-click the tool's tab to move it to the other toolbar.
Panel tools vs. Drawer tools
In the Command Menu:
Panel tools are tools which open in the main toolbar by default.
Drawer tools are tools which open in the Drawer toolbar by default, at the bottom of DevTools. Press Esc to show or hide the Drawer.
The Command Menu first lists the Panel tools, and then the Drawer tools:
To move a tool to the other toolbar, right-click the tool's tab and then select Move to bottom or Move to top.
To open the Command Menu, press Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS). Or, click the Customize and control DevTools () button and then select Run command.
Closing tool tabs
To close a tool tab that's on a toolbar:
Click the x on the tab.
The Elements, Console, and Sources tool tabs cannot be closed.
To close all of the optional tabs at once:
Right-click an optional tab on the toolbar (a tab that has an x button), and then select Close all.
Only the Elements, Console, and Sources remain on the main toolbar. (The Drawer toolbar is unaffected.)
If you closed all tabs on the Drawer, only the Console tab remains on the Drawer toolbar. (The main toolbar is unaffected.)
Restoring the default tool tabs
To restore all of the default tabs on the main toolbar:
In DevTools, select Settings (
) > Preferences.Click the Restore defaults and refresh button.
The main toolbar again has all of the default tabs. The Drawer then has only the Console tab.
See also
- Overview of DevTools - Similar to the present article, but broader coverage, with a top-level introduction of DevTools.
- Simplify DevTools using Focus Mode - In Focus Mode, the Activity Bar is a compact replacement for the main toolbar, and the Quick View list is a replacement for the tabs on the Drawer toolbar.
Feedback
Submit and view feedback for