Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators
Overview Open Chrome DevTools Simulate mobile devices with Device Mode Performance insights: Get actionable insights on your website's performance Lighthouse: Optimize website speed Animations: Inspect and modify CSS animation effects Changes: Track your HTML, CSS, and JavaScript changes Coverage: Find unused JavaScript and CSS CSS Overview: Identify potential CSS improvements Issues: Find and fix problems Media: View and debug media players information Memory Inspector: Inspect JavaScript ArrayBuffer Network conditions: Override the user agent string Recorder: Record, replay and measure user flows Security: Understand security issues Search: Find text across all loaded resources WebAuthn: Emulate authenticators

Customize

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, tabs, and panes

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

  • Panels at the top of DevTools
  • Panes in the Elements panel such as Styles, Computed, Layout, etc.
  • Drawer tabs at the bottom of DevTools

Additionally, you can move panels and tabs up and down to and from the Drawer. To do this, right-click the panel or tab and select Move to top or Move to bottom from the drop-down menu.

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.