Customization
Published on
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:
- Go to
chrome://flags/#enable-devtools-experiments
. - Click Enable.
- Click Relaunch Now, at the bottom of the page.
The next time you open DevTools, there's a new page called Experiments in Settings.
Last updated: • Improve article