Change the appearance of DevTools and access hidden features.
- Open the Main and Settings menus.
- Customize the appearance of DevTools.
- Access hidden features.
Open the Main Menu
The Main Menu of DevTools is a dropdown menu for configuring how DevTools looks, accessing additionals tools, opening the Settings, and more.
To open the Main Menu, click on the Main Menu button in the top-right of the DevTools window.
Open the Settings
To open the DevTools Settings, press F1 while DevTools is in focus, or open the Main Menu and then select Settings.
Open the Command Menu
Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux) to open the Command Menu.
Reorder panel tabs
Click, hold, and drag a panel tab to change its ordering. Your custom tab order persists across DevTools sessions.
For example, by default the Network tab is usually the fourth to the left.
You can drag it to any position, such as the first to the left.
Customize DevTools placement
You can dock DevTools on the bottom of the page, to right of the page, or you can open it in a new window.
To change the DevTools’ placement, open the Main Menu and select the Undock into separate window () button, Dock to bottom () button, or Dock to right () button.
Use dark theme
To use a dark DevTools theme, open DevTools’ Settings, go to the Preferences page, find the Appearance section, and then select Dark from the Theme dropdown menu.
Open and close drawer tabs
Press Esc to open and close the DevTools Drawer. The screenshot below shows an example of the Elements panel while the Console Drawer is open on the bottom.
From the Drawer you can execute commands in the Console, view the Animation Inspector, configure network conditions and rendering settings, search for strings and files, and emulate mobile sensors.
While the Drawer is open, click the three dot icon () to the left of the Console tab and then select one of the dropdown menu options to open the other tabs.
When DevTools Experiments is enabled, a new page called Experiments shows up in the DevTools Settings. From this page you can enable and disable experimental features.
To enable Experiments, go to
chrome://flags/#enable-devtools-experiments and click Enable. Click the Relaunch Now button at the bottom of the page.
You should now see a new page called Experiments when you open DevTools Settings.
Emulate print media
To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.