Configure and Customize DevTools

Change the appearance of DevTools and access hidden features.


  • Open the Main and Settings menus.
  • Customize the appearance of DevTools.
  • Access hidden features.

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.

main menu

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.

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.

before reorder

You can drag it to any position, such as the first to the left.

after reorder

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 (undock button) button, Dock to bottom (dock to bottom button) button, or Dock to right (dock to right button) 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.

dark theme

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.

Elements panel with Drawer

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 (three dot icon) to the left of the Console tab and then select one of the dropdown menu options to open the other tabs.

drawer tabs menu

Enable experiments

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.

DevTools Experiments

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.

enabling print preview mode

Show HTML comments

To show or hide HTML comments in the Elements panel, open Settings, go to the Preferences panel, find the Elements section, and then toggle the Show HTML comments checkbox.