Use the toolbar panel

Open a tool

The tools you've switched on appear as icon buttons under five headings: Capture, Inspect, Debug, This page and Utilities. Point at an icon (or tab to it) to see its name. Clicking one does one of three things:

• Starts on the page. The grabs, Inspect element, Copy a container and Measure close the panel and start straight away on the page. Press Esc on the page to stop.
• Switches a page mode. Outline every element, Layout grid, Edit page text and Turn off CSS turn on or off, and the panel stays open. A mode that's on shows as pressed, and the line at the bottom of the panel confirms it, for example "Layout grid: on."
• Opens its own controls. Most other tools, such as Color picker, Record the tab or Emulate, open a view inside the panel with their own buttons. The arrow at the top left (Back to all tools) returns to the full list.

Some icons carry a small badge with live state: Recording on Record the tab or Record a HAR file, how many rules are on for Request rules, how many elements are hidden on this page, or Masked when Mask PII has covered the page.

Pages the tools can't reach

Chrome keeps its own pages (chrome:// addresses) and the Chrome Web Store off limits to extensions. On those, the panel says "Page tools can't run on this page", and the tools that need the page are grayed out. The ones that don't, such as Color picker, Request rules, Encode and decode or Browser and system info, still work. See Troubleshoot common issues.

The header row

• Reload, skipping the cache (the circular arrow): a hard reload of the current tab, then the panel closes.
• View page source (the code icon): opens the page's source in a new tab beside it. It's grayed out on pages with no source to show.
• Open in its own window: the pop-out window, below.
• The moon or sun button switches the panel between dark and light.
• Settings (the gear) opens the settings page. The Settings link at the bottom right of the panel does the same.

Keep it open in its own window

The toolbar panel closes when you click on the page. To keep the tools in view while you work, press Open in its own window. The pop-out window holds the same panel and:

• works on the tab you're using in your last browser window, and follows you as you switch tabs;
• stays open where the panel would close, bringing the browser window forward instead;
• reopens where you last left it, at the size you gave it.

To record a tab from the pop-out, Chrome asks which tab to share first; keep the window open until you stop. See Take screen grabs and record the tab.

The keyboard shortcut

Alt+Shift+D opens the panel from any tab. If another extension already uses it, or you'd like a different one, set it in Settings → Tools → Keyboard shortcuts, which links to Chrome's shortcuts page. There are shortcuts for grabs, Inspect element and Copy a container too. See Right-click menu, shortcuts and the Elements tab.

Change what the panel shows

In Settings → Tools → Toolbar panel, switch tools off to leave them out of the panel, or drag them into a different order within their group. See Choose and order your tools.

Related guides

Next, read What DevTools+ does, Choose and order your tools or Right-click menu, shortcuts and the Elements tab.