Fundamentals Tools Updates Case Studies
ホーム Chrome DevTools Lighthouse Puppeteer Workbox Chrome User Experience Report
Didn't make the #ChromeDevSummit this year? Catch all the content (and more!) in the Chrome Dev Summit 2019 playlist on our Chrome Developers YouTube Channel.

Customize Chrome DevTools

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:

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

Drawer

The Drawer contains many hidden features.

Press Escape to open or close the Drawer.

The Drawer.
Figure 2. The Drawer.

Click More More to open other Drawer tabs.

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

Reorder panels

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 4: 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

See Chrome DevTools Placement.

Undocked DevTools.
Figure 5. Undocked DevTools.

Dark theme

See Enable Dark Theme.

The dark theme.
Figure 6. The dark theme.

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.