This page lists the ways you can customize Chrome DevTools.

Settings

settingsSettings >Preferences contains many options for customizing DevTools.

SeeOpen Settings andPreferences.

Dark theme

You can enable dark theme inSettings or theCommand Menu.

1. Open the Command Menu.

2. Start typingdark, select theSwitch to dark theme command, and then pressEnter to run the command.

   

3. Alternatively, set your theme insettingsSettings >Preferences >Appearance >Themes.

Dynamic theme

DevTools can automatically match Chrome's color theme.

To set a theme:

1. Open a new tab and clickeditCustomize Chrome in the right bottom corner.
2. InAppearance, pick a theme throughwallpaperChange themes or select a color palette.

To turn off dynamic theming, clearsettingsSettings >Preferences >Appearance >check_box_outline_blankMatch Chrome color scheme and reload DevTools.

Drawer

TheDrawer contains many hidden features.

PressEscape to open or close the Drawer.

Clickmore_vertMore Tools to open otherDrawertabs.

Change DevTools placement

By default, DevTools is docked to the right of your viewport. You can also dock to the bottom or left sides or undock DevTools into a separate window.

You can change the placement of DevTools in two ways:

• Main Menu: Openmore_vertCustomize And Control DevTools and click:
  • ad_groupUndock into separate window
  • dock_to_rightDock to left
  • dock_to_bottomDock to bottom
  • dock_to_leftDock to right

• Command Menu:

  1. Open the Command Menu.
  2. Start typingdock and select one of the suggested options: dock to bottom, left, right, undock, or restore last dock position.

To toggleRestore last dock position with a keyboard shortcut, press:

• On Linux or Windows:Control+Shift+D
• On MacOS:Command+Shift+D

Reorder panels, tabs, and panes

To change ordering, click and drag left or right any of the following:

• Panels at the top of DevTools.
• Panes in theElements panel such asStyles,Computed,Layout, and others.
• Panes in theSources panel such asPage,Workspace,Overrides, and others.
• Drawer tabs at the bottom of DevTools.

Additionally, you canmove panels and tabs up and down to and from theDrawer. To do this, right-click the panel or tab and selectMove to top orMove to bottom from the drop-down menu.

Your custom tab order persists across DevTools sessions.

Panel layout

By default, DevTools will auto-rearrange your panel layout depending on window size. You can disable the auto-rearrangement. Go tosettingsSettings >Preferences >Appearance and update thepanel layout based on your preference.

For example, theStyles pane in theElements panel will move from the side to the bottom when screen size is small. If you want theStyle pane to always stay on the side, change thepanel layout tovertical.

Change DevTools UI language

SeesettingsSettings >Preferences >Appearance >Language.

Sync settings

You can sync your DevTools settings across multiple devices.

To enable sync, first turn onChrome Sync. Once enabled, your DevTools settings are synced by default.

You can enable or disable the DevTools settings sync separately using thesettingsSettings >Sync >check_boxEnable settings sync checkbox.

DevTools syncs most of the settings except those in theWorkspace,Experiments, andDevices tabs and a few other general settings. The state of theEnable settings sync checkbox is synced across devices as well.

Note: DevTools also doesn't syncSnippets, they are stored as local preferences.

For example, the followingAppearance settings are synced, so you have a consistent experience across devices and don't need to re-define the same settings again.

However, thedock setting isn't synced because developers have different dock preferences when debugging on different sites.

Customize keyboard shortcuts

SeeSettings > Shortcuts.

Enable experiments

SeeSettings > Experiments.