| title | Customize DevTools |
|---|---|
| description | A list of ways to customize Microsoft Edge DevTools. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 09/08/2022 |
This page lists the ways to customize Microsoft Edge DevTools.
Settings > Preferences contains many options for customizing DevTools.
To open Settings, in DevTools, click the Settings icon (
). Or, while DevTools has focus, press F1.
In the Drawer toolbar in the bottom of DevTools, you can select which tools to display.
To open (or close) the Drawer, press Escape.
You can move tools between the main panel and the drawer.
-
To move a tool from the drawer to the main panel, right-click a tool, and then select Move to top.
-
To move a tool from the main panel to the drawer, right-click a tool, and then select Move to bottom.
Click and drag a tool to change the ordering. Your custom tool order persists across DevTools sessions.
By default, the Network tool is usually the fifth tab on the main toolbar. In the following figure, the Network tool is being moved to become the first tab in the main toolbar.
To keep the DevTools interface streamlined, many of the tools aren't opened by default. To open a tool in the main panel or the Drawer, click the More Tools (
) button to the right of the tabs, and then select a tool from the list.
To close a tool, select the Close (
) button in the tool's tab.
See Change DevTools placement (Undock, Dock to bottom, Dock to left).
See Zoom DevTools in or out in Overview of DevTools.
See Apply a color theme to DevTools.
To restore the default theme, placement, tools order, and any other customized settings, select Settings > Preferences > Restore defaults and refresh.
See Customize keyboard shortcuts.
Published on 5 May 2022.
Learn how to customize DevTools to fit your needs.
This video covers how to dock or undock DevTools, open new tools, and close those you don't need. It describes how to move tools in the bottom drawer and customize the text size and theme. The video also explains how you can use the Command Menu keyboard shortcuts to quickly customize DevTools.
Published on 1 September 2022.
Understand how the Microsoft Edge DevTools UI is organized. If you are confused about what tools are available, and what the main parts of the DevTools interface do, this video will help get more comfortable.
In this video, we go over the UI structure, with its main toolbar and panel and its drawer area. We also go over how to find, open, and close tools, restore the default settings, and go over the list of available tools.
Check out this video to learn about the main parts of the DevTools UI, how to customize it to meet your needs, learn about the different tools that are available, and where to go for help.
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).
This work is licensed under a Creative Commons Attribution 4.0 International License.