Overview Open Chrome 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 Record, replay and measure user flows 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 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 Record, replay and measure user flows 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 Updated 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:

  • Click on the Settings icon.
  • Press F1 while DevTools is in focus.
  • Press ? while DevTools is in focus.
Settings icon

Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

The Drawer

Click More More to open other Drawer tabs.

The button for opening Drawer tabs.

Reorder panels and tabs

Click and drag a panel / tab left or right to change its ordering. You can move the panel / tab up and down too by right click > move to top / move to bottom. Your custom tab order persists across DevTools sessions.

Change DevTools placement

See Chrome DevTools Placement.

Dark theme

See Enable Dark Theme.

The dark theme.

Panel layout

By default, DevTools will auto-rearrange your panel layout depending on window size. You can disable the auto-rearrangement. Go to Settings > update the panel layout based on your preference.

For example, the Styles pane in the Elements panel will move from the side to the bottom when screen size is small. If you want the Style pane to always stay on the side, change the panel layout to vertical.

Change panel layout

Change DevTools UI language

See Use DevTools in your preferred language.

Change language in Settings > Preferences

Sync settings

You can sync your DevTools settings across devices. To enable that, you need to:

  1. Turn on Chrome profile sync. Your DevTools settings are synced by default when you turn on Chrome profile sync. Chrome profile sync
  2. The DevTools sync settings can be updated via Settings > Sync > Enable settings sync checkbox. DevTools sync settings
  3. Most of the settings are synced, except for the Workspace, Experiments, and Devices tabs and a few other general settings. The state of the Enable settings sync checkbox is synced across devices as well. For example, the following appearance settings are synced so you have a consistent experience across devices and don’t need to re-define the same settings again. appearance settings However, the dock settings isn’t sync because developers have different dock preferences when debugging on different sites. dock

Customize keyboard shortcuts

See Customize chords keyboard shortcuts.

Chords keyboard shortcuts

Experiments

To enable DevTools experiments:

  1. Go to Settings > Experiments.
  2. Search for the experiment you would like to try, enable on checkbox.
  3. Close the page.
  4. Click Reload DevTools.

The next time you open DevTools, the experiment should be enabled. You can disable the experiment with similar steps above.

Experiments

Last updated: Improve article

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