7 Chrome DevTools Shortcuts to Boost Your Productivity
There’s at least one tip in this list you probably don’t know
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
Increment by 0.1
Mac: Option + Up and Option + Down
Windows: Alt + Up and Alt + Down
Increment by 1
Mac: Up + Down
Windows: Up + Down
Increment by 10
Mac: ⇧+ Up and ⇧ + Down
Windows: ⇧ + Up and ⇧ + Down
Increment by 100
Mac: ⌘ + Up and ⌘ + Down
Windows: Ctrl + Up and Ctrl + Down
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.