Customization

This page lists the ways you can customize Chrome 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.
• Click Settings.

Figure 1. Settings.

Drawer #

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

Figure 2. The Drawer.

Click More to open other Drawer tabs.

Figure 3: The button for opening Drawer tabs, outlined in blue.

Reorder panels #

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

Figure 4: A DevTools window with a custom tab ordering. By default, the Network panel tab is usually the fourth from the left. In the screenshot, it's the first from the left.

Change DevTools placement #

See Chrome DevTools Placement.

Figure 5. Undocked DevTools.

Dark theme #

See Enable Dark Theme.

Figure 6. The dark theme.

Experiments #

To enable DevTools experiments:

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

The next time you open DevTools, there's a new page called Experiments in Settings.