chrome开发工具指南（五）

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.

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.