This reference shows you how to:
- Access and use common parts of the Chrome DevTools UI, such as the main menu.
- Change the Chrome DevTools UI.
Click More to open the Main Menu.
To open Settings, do one of the following:
- Press F1 while DevTools is in focus.
- Open the Main Menu and then select Settings.
To open the DevTools Command Menu, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux).
The Command Menu uses a fuzzy search. For example, the exact command to switch
to the dark theme is
Switch to dark theme, but typing
theme filters out
the other commands just as well.
The list of commands that you see upon opening the Command Menu represents all available commands.
Press Escape to open or close the Drawer.
Click More to open other Drawer tabs.
Change the DevTools UI
Reorder panel tabs
Click and drag a panel tab to change its ordering. Your custom tab order persists across DevTools sessions.
Change DevTools placement
To change the placement of the DevTools window:
- Open the Main Menu.
- Select Undock into separate window , Dock to left , Dock to bottom , or Dock to right .
You can also change the placement of DevTools from the Command Menu. The names of the commands are the same as the options mentioned above.
Use dark theme
To set DevTools to a dark theme:
- Open Settings.
- Click the Preferences tab.
- Under the Appearance section, set Theme to Dark.
You can also set DevTools to dark theme from the Command Menu.
To enable DevTools experiments:
- Go to chrome://flags/#enable-devtools-experiments.
- Click Enable.
- Click Relaunch Now, at the bottom of the page.
The next time you open DevTools, there's a new page called Experiments in Settings.