Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources
Overview Open Chrome DevTools What's New In DevTools Get Started With Viewing And Changing The DOM Find Unused JavaScript And CSS With The Coverage Tab Find and fix problems with the Issues tab Run commands in the Command Menu View and debug media players information Emulate authenticators and debug WebAuthn Edit files with Workspaces Debug Progressive Web Apps Understand security issues Keyboard shortcuts View page resources

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

Figure 1. Settings.

Drawer #

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

The Drawer.

Figure 2. The Drawer.

Click More More to open other Drawer tabs.

The button for opening 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.

A DevTools window with a custom panel tab ordering.

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.

Undocked DevTools.

Figure 5. Undocked DevTools.

Dark theme #

See Enable Dark Theme.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.