7 Chrome DevTools Shortcuts to Boost Your Productivity

There’s at least one tip in this list you probably don’t know

Thomas Guibert
Feb 26 · 3 min read
Photo by Puria Berenji on Unsplash

What would we do without shortcuts? I personally use shortcuts hundreds of times every day, and I’m sure you do too.

Reducing the need for reaching for the mouse and spontaneously using a shortcut to accomplish a task is incredibly time-saving.

Here are some more shortcuts to boost your productivity.


Open DevTools to the Last-Used Panel

Mac: ⌘ + ⇧ + I
Windows:
F12 or Ctrl + ⇧ + I

This is definitely easier than going to the main menu, hovering over the More Tools submenu, and then clicking on Developer Tools.


Select an Element to Inspect in the Page

Mac: ⌘ + ⇧ + C
Windows:
Ctrl + ⇧ + C

If DevTools isn’t open, it first opens it to the Elements panel.
Then, with the cursor, hover over the webpage, and it shows you which node you’re targeting. It gives you basic information about the element.

On click, it targets it on the node list of DevTools


Toggle the Console Drawer

Mac and Windows: Esc

This is useful if you’re on any panel but the Console one and still want to work with the console opened.


Clear the Console

Mac: ⌘ + K
Windows:
Ctrl + L

This is for those, like me, who like to start working with an empty console (as you might be doing in your terminal).


Change the DevTools Docking Position

Mac: ⌘ + ⇧ + D
Windows:
Ctrl + ⇧ + D

This shortcut switches back to the previous dock position you were using.


Toggle Device Toolbar

Mac: ⌘ + ⇧ + M
Windows:
Ctrl + ⇧ + M

This is useful if you want to switch quickly between device mode and normal mode.

Important: DevTools needs to be open in order for this shortcut to work.


Increment and Decrement CSS Property Values

Mac: Option + Up and Option + Down
Windows:
Alt + Up and Alt + Down

Mac: Up + Down
Windows:
Up + Down

Mac: ⇧+ Up and ⇧ + Down
Windows:
⇧ + Up and ⇧ + Down

Mac: ⌘ + Up and ⌘ + Down
Windows:
Ctrl + Up and Ctrl + Down


Conclusion

Thanks for reading! Shortcuts are efficient and time-saving. I hope you found at least one new shortcut on this list to add to your set.

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Thomas Guibert

Written by

Full Stack Javascript Developer, in ❤️ with TypeScript and GraphQL. Sharing my knowledge one piece at a time…

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

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