DevTools tips — day 6: the Command Menu

part of the “Advent calendar for front-end developers” series

Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve had a single yet interesting tip number 16, so let’s continue starting with…

17. Start using Command Menu (if you haven’t already)

Some of Chrome DevTools’ functionality is buried deep in specific panels, menus etc. And there are several that hidden even below these places. That’s why Command Menu is an essential tool in the toolbox.

If you’ve ever user "Find Action" in WebStorm or "Command Palette" in Visual Studio Code it’s a similar functionality. To display it:

press [Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac) when DevTools are opened (they don’t have to be in focus)

(or on Mac) when DevTools are opened (they don’t have to be in focus) or use the option from the DevTools’ ⋮ dropdown button:

You will see the command input and a huge list of command to choose from, grouped into several sections that I’ve collected in the following picture:

Btw. I personally believe this single image is one of the best symbols of how ridiculously powerful workhorse the DevTools are!

Let’s see some of the gems hidden here, shall we?

18. Take screenshots, big and small

If you want to take a screenshot of a specific DOM node, select that node, open Commands Menu and look for the Capture node screenshot command.