UI Reference

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

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.

Main Menu

Click More to open the Main Menu.

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.

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.

Figure 3: The Command Menu.

Drawer

Press Escape to open or close the Drawer.

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

Click More to open other 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.

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 , Dock to left , Dock to bottom , or Dock to right .

Note: Dock to left was introduced in Chrome 58.

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.

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.

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?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

No

What was the worst thing about this page?

It didn't help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.