Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

UI Reference

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 More to open the Main Menu.

The DevTools main menu button.
Figure 1: The button for opening the Main Menu, outlined in blue.

Settings

To open Settings, do one of the following:

  • Press F1 while DevTools is in focus.
  • Open the Main Menu and then select Settings.
DevTools settings.
Figure 2: DevTools settings.

Command Menu

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.

The Command Menu.
Figure 3: The Command Menu.

Drawer

Press Escape to open or close the Drawer.

A DevTools window, with the Drawer open at the bottom. The Console tab is open in the Drawer.
Figure 4: A DevTools window, with the Drawer open at the bottom. The Console tab is open in the Drawer.

Click More More to open other Drawer tabs.

The button for opening Drawer tabs.
Figure 5: The button for opening Drawer tabs, outlined in blue.

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.

A DevTools window with a custom panel tab ordering.
Figure 6: A DevTools window with a custom tab ordering. By default, the Network panel tab is usually the fourth from the left. In the screenshot, it's the first from the left.

Change DevTools placement

To change the placement of the DevTools window:

  1. Open the Main Menu.
  2. Select Undock into separate window Undock into separate window, Dock to left Dock to left, Dock to bottom Dock to bottom, or Dock to right 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.

The DevTools window, docked to the left.
Figure 7: The DevTools window, docked to the left.

Use dark theme

To set DevTools to a dark theme:

  1. Open Settings.
  2. Click the Preferences tab.
  3. Under the Appearance section, set Theme to Dark.

You can also set DevTools to dark theme from the Command Menu.

The dark theme of DevTools.
Figure 8: The dark theme of DevTools.

Experiments

To enable DevTools experiments:

  1. Go to chrome://flags/#enable-devtools-experiments.
  2. Click Enable.
  3. Click Relaunch Now, at the bottom of the page.

The next time you open DevTools, there's a new page called Experiments in Settings.

Feedback

Was this page helpful?