Don't miss out on the action at this year's Chrome Dev Summit, streaming live on YouTube. Watch now.

DevTools Digest: More Power with the New Command Menu

Read about DevTools' new command menu and its over 60 actions that enable crazy fast workflows.

Cmd/Ctrl+Shift+P to bring up the Command Menu

Command Menu in DevTools

The "Jump to File" dialog that appears when you press Cmd+P (or Ctrl+P) in the Sources panel isn't terribly well known, but has been around for a while. We've now went much further than that and developed a text-editor-inspired command menu that can drive almost every important action in DevTools.

Hit Cmd+Shift+P (or Ctrl+Shift+P) anywhere (even when the page is in focus!) to bring up the Command Menu, then type to filter and hit Enter to trigger the action. A few sample actions you could try:

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

The new command menu is a super quick way to navigate and discover new settings and actions across DevTools.

Looking for the good old "Go to member" dialog that was previously also associated with that shortcut? It is still there, just hit Cmd+Shift+O (or Ctrl+Shift+O) from now on.

Pretty-print HTML

Pretty HTML

We've had pretty-print for JS and CSS sources built into the Sources panel for a while now, but have just extended it to supoort full-blown HTML pretty-printing. Give it a try – not only does it reformat the HTML, it also reformats the JavaScript and CSS within it!


As always, let us know what you think via Twitter or the comments below, and submit bugs to crbug.com/new.

Until next month! Paul Bakaus & the DevTools team