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:

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

# Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

Click More to open other 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.

# 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 DevTools UI language

See Use DevTools in your preferred language.

# 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.
2. The DevTools sync settings can be updated via Settings > Sync > Enable settings sync checkbox.
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. However, the dock settings isn’t sync because developers have different dock preferences when debugging on different sites.

# Customize keyboard shortcuts

See Customize 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.