Customize Microsoft Edge DevTools

This page lists the ways to customize Microsoft Edge DevTools.

Settings

Settings > Preferences contains many options for customizing DevTools.

To open Settings, do one of the following:

  • Press F1 while DevTools is in focus.
  • Open the Main Menu and then select Settings.
Figure 1

Settings
Settings

Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

Figure 2

The Drawer
The Drawer

Click More More to open other Drawer tabs.

Figure 3

The button for opening Drawer tabs
The button for opening Drawer tabs

Reorder panels

Click and drag a panel tab to change its ordering. Your custom tab order persists across DevTools sessions.

Note

By default, the Network panel tab is usually the fourth from the left. In Figure 4, it is the first from the left.

Figure 4

A DevTools window with a custom tab ordering
A DevTools window with a custom panel tab ordering

Change DevTools placement

See Microsoft Edge DevTools Placement.

Figure 5

Undocked DevTools
Undocked DevTools

Dark theme

See Enable Dark Theme.

Figure 6

The dark theme
The dark theme

Experiments

To enable DevTools experiments:

  1. Go to edge://flags/#enable-devtools-experiments.
  2. Click Enable.
  3. Click Relaunch Now, at the bottom of the page.

The next time you open DevTools, a new page is displayed called Experiments in Settings.

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.