DevTools tips — day 14: other shortcuts

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

Tomek Sułkowski
Dec 14, 2018 · 3 min read

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:

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:

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

Tomek Sułkowski

Written by

Frontend trainer, Angular enthusiast, family man,

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade