DevTools tips — day 14: other shortcuts

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 been keeping track of objects and functions, today let’s look at some useful shortcuts worth knowing.

During the course of the 13 days that the calendar has been running so far we’ve seen some handy keyboard shortcuts. Some examples:

• h for hiding elements
• ctrl + /many things really/ to move elements or copy and paste
• ctrl + shift + P to toggle Commands Menu

Here are some other key bindings that are quite useful in day-to-day frontend developer dealings:

37. Switch between 2 recent DevTools placements

I usually find myself using one favourite position of the DevTools window (dock to bottom) around 95% of the time, but sometimes I prefer switching to a different one (dock to right usually). You can do that from the DevTools dropdown menu or Commands Menu… or use a ctrl + shift + D shortcut (⌘ + shift + D on Mac).

It will toggle between the current position and the one used by you before:

38. Switch between DevTools panels

The less clicking the better! And we often go from, say, Elements panel to Sources and back. There are shortcut for switching between active panels:

• press ctrl + [ and ctrl + ] to switch the panel to the left and to the right from the currently active panel respectively
• press ctrl + 1 to ctrl + 9 to go to panel number 1..9 (so ctrl + 1 to Elements, ctrl + 4 to Network, etc.)

Heads up! This latter set of shortcuts is deactivated by default. To open activate, go to the DevTools’ Settings » Preferences » Appearance and turn on the option:

39. Increment/decrement

This is most useful for Styles section: you can easily increment or decrement any numeric value by 0.1, 1 or 10 by using top/bottom arrows with or without modifier keys:

Works even with colors! (doesn’t make much sense probably, to be honest, but it does work 😉)

Ok, enough tips for today. Happy weekend!
As usual, if you’ve learned something new, please:

→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:

Tomek Sułkowski (@sulco) | Twitter

Also, the 15th day is already published, read it here:

DevTools tips — day 15: twitter day