Main Menu
Click More to open the Main Menu.
Settings
To open Settings, do one of the following:
- Press F1 while DevTools is in focus.
- Open the Main Menu and then select Settings.
Command Menu
To open the DevTools Command Menu, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux).
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.
![A DevTools window with a custom panel tab ordering.](https://developers.google.com/web/tools/chrome-devtools/images/custom-panel-tab-ordering.png)
Change DevTools placement
To change the placement of the DevTools window:
- Open the Main Menu.
- Select Undock into separate window
, Dock to left
, Dock to bottom
, or 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.](https://developers.google.com/web/tools/chrome-devtools/images/left-dock-example.png)
Use dark theme
To set DevTools to a dark theme:
- Open Settings.
- Click the Preferences tab.
- 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.](https://developers.google.com/web/tools/chrome-devtools/images/dark-theme.png)
Experiments
To enable DevTools experiments:
- Go to chrome://flags/#enable-devtools-experiments.
- Click Enable.
- Click Relaunch Now, at the bottom of the page.
The next time you open DevTools, there's a new page called Experiments in Settings.