Overview Open Chrome DevTools What's New in DevTools DevTools tips 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 ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog
Overview Open Chrome DevTools What's New in DevTools DevTools tips 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 ArrayBuffer, TypedArray, DataView, and Wasm Memory. Network conditions: Override the user agent string Security: Understand security issues Search: Find text across all loaded resources Sensors: Emulate device sensors WebAuthn: Emulate authenticators Customize DevTools Engineering blog

Customize DevTools

Published on Updated on

This page lists the ways you can customize Chrome DevTools.

Settings

Settings. Settings > Preferences contains many options for customizing DevTools.

See Open Settings and Preferences.

Dark theme

You can enable dark theme in Settings or the Command Menu.

The dark theme.
  1. Open the Command Menu.

  2. Start typing dark, select the Switch to dark theme command, and then press Enter to run the command.

    The dark theme command.
  3. Alternatively, set your theme in Settings. Settings > Preferences > Appearance > Themes.

Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

The Drawer

Click More Tools. More Tools to open other Drawer tabs.

The More Tools button that opens other Drawer tabs.

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: Open More. Customize And Control DevTools and click:

    • Undock. Undock into separate window
    • Dock to left Dock to left
    • Dock to bottom. Dock to bottom
    • Dock to right. Dock to right
  • Command Menu:

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

To toggle Restore 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 the Elements panel such as Styles, Computed, or Layout.
  • 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.

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 Settings. Settings > Preferences > Appearance > Language.

Change language in Settings > Preferences

Sync settings

You can sync your DevTools settings across multiple devices.

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

Chrome profile sync.

You can enable or disable the DevTools settings sync separately using the Settings. Settings > Sync > Checkbox. Enable settings sync checkbox.

DevTools sync settings

DevTools syncs most of the settings except those in 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.

The appearance settings.

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

The dock.

Customize keyboard shortcuts

See Settings > Shortcuts.

Enable experiments

See Settings > Experiments.

Updated on Improve article

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