How to find stuff in DevTools?

This feature is only available in Chrome 59 and later

DevTools is awesome but sometimes can be hard to manage. There’s so many tools and functions and shortcuts that it gets hard to remember everything you use unless you use it regularly. In Chrom 59, DevTools introduced a command menu similar to the one in Visual Studio Code

Cmd + Shift + P (in Mac) or Ctrl + Shift + P (in Windows) bring up the DevTools Command Menu, then type to filter and hit Enter to trigger the action. Typing ? will give you a list of commands you can use in addition to just searching for the task you want to perform.

DevTools Command Menu

A few sample actions you could try:

  • Appearance: Switch to Dark Theme
  • DevTools: Dock to bottom
  • Mobile: Inspect Devices…
  • Network: Go offline