Feedback Edit

Customize DevTools

  • Article
  • 2 minutes to read

This page lists the ways to customize Microsoft Edge DevTools.

Settings

Settings > Preferences contains many options for customizing DevTools.

To open Settings, in DevTools, click the Settings icon (Settings icon.). Or, while DevTools has focus, press F1.

Settings.

Drawer

In the Drawer toolbar in the bottom of DevTools, you can select which tools to display.

To open (or close) the Drawer, press Escape.

The Drawer.

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.

    Moving a tool from the Drawer to the main toolbar.

  • To move a tool from the main panel to the drawer, right-click a tool, and then select Move to bottom.

    Moving a tool from the main toolbar to the Drawer.

Reorder tools

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.

Custom order of DevTools in a toolbar.

Open and close tools

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 (More Tools.) button to the right of the tabs, and then select a tool from the list.

The More Tools (+) button to open a new tool

To close a tool, select the Close (Close Tool.) button in the tool's tab.

The tab's Close button

Change where DevTools is docked in the browser

See Change DevTools placement (Undock, Dock to bottom, Dock to left).

Undocked DevTools.

Zoom DevTools in or out

See Zoom DevTools in or out in Overview of DevTools.

Color themes

See Apply a color theme to DevTools.

Selecting a different color theme.

Restore default settings

To restore the default theme, placement, tools order, and any other customized settings, select Settings > Preferences > Restore defaults and refresh.

Restoring default settings.

Customize keyboard shortcuts

See Customize keyboard shortcuts.

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).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.