DevTools tips — day 18: hidden in a drawer

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 seem some ways to improve logs readability in the console. Today let’s talks about the powerful set of functionalities hidden in the DevTools drawer:

50. The DevTools drawer

Chrome DevTools has a lot of great number of apparatuses divided into its 9 tabs (Elements, Console, Sources, Network, etc…) — but that’s actually just a part of it! There is a “parallel” set of tabs, that are hidden below the main window. This set is called the Drawer.

To access it, when you are in DevTools (any tab), press [esc] .

Press [esc] again to hide it:

By default you will see a Console tab there. That’s the same exact console as the main Console panel. That’s why it will show for every main tab (Elements, Sources, Network…) except the Console one — for which it doesn’t really make sense.

It’s handy to have such console visible at the same time as e.g. the Elements panel. But that’s not all that is hidden in the Drawer.

51. The other tools in the drawer

There are so many other functionalities hidden in the drawer that you likely won’t need most of them most of the times, that’s why they are hidden and you can just pick and choose which one you want to show there.

To open the full list of these possibilities click the menu icon ( ⋮ ) placed before the drawer console panel’s tab. Alternatively, you can also use the Commands Menu and type in “Drawer”:

Ok, let’s see all the options once more:

Animations , Changes , Console , Coverage , Network conditions , Performance monitor , Quick source , Remote devices , Rendering , Request blocking , Search , Sensors and What’s new

Phew, that’s… [counts quickly] a total of 13 new areas to explore!

As have probably guessed, I will show more tips for the things we can find here… but let’s leave this till tomorrow (here), when we’ll look into couple of the coolest of the bunch.