A genuine Chrome browser power user can only reach maximum efficiency using shortcuts. Shortcuts bridge the gap over repetitive tasks that might not be individually super time-consuming. Still, they do add up and crawl up your productivity with time.
This post is divided into two sections. The first section shows you general shortcuts (e.g., navigation) that the broad audience will find helpful. The second section explores more advanced shortcuts explicitly aimed at developers making heavy use of the browser and its debug capabilities for web development-related tasks.
General must know shortcuts
- Jump to the address bar - ⌘ + L | Ctrl + L - with Chrome; you not only use the address bar to jump to new sites and "google" stuff on the web. This particular shortcut is a significant time-saver.
- Jump to the next/previous open tab - ⌘ + Option + Right/Left arrow | Ctrl + Tab - swiftly navigate through your browser tabs.
- Show or hide the Bookmarks bar - ⌘ + Shift + B | Ctrl + Shift + B - especially relevant when you want to make screen captures and get that extra little space and top and do not share your bookmarks.
- Open the History page in a new tab - ⌘ + Y | Ctrl + H - often, we need to go back in time and scan through previously visited links. It's handy to know how to get there in a flash.
Debugging shortcuts
Now let's jump into a list of shortcuts more specific to the debugging capabilities of the browser, useful for anyone trying to get productive with debugging.
- Open developer tools - ⌘ + Option + I | Ctrl + Shift + J - this is how we start, having quick access to the devtools panel is essential.
- Switch devtools panel to last docking position - ⌘ + Shift + D | Control + Shift + D - as a developer, it's common to handle different layout sizes. At the same time, you work, and the devtools panel keeps getting in the way. Use this shortcut to swiftly change the panel position to be docked at the bottom or one of the sides, for example.
- Clear the console - ⌘ + K or Option + L | Control + L - often, you'll find the devtools console flooded with logs. You can press an icon to clean them up, but nothing is more satisfying than quickly blanking out the panel with a simple shortcut.
- Navigate left/right - ⌘ + [ or ] | Control + [ or ] - navigating back and forth between the different devtools panels.
- Toggle breakpoints (globally) - ⌘ + F8 | Control + \ - Are breakpoints getting in the way? Sometimes, we want to disable all the breakpoints at once, just for a moment. Use this shortcut to toggle off all the breakpoints at once.
- Toggle breakpoint in selected line - ⌘ + B | Command + B - having this one can speed up your debugging setup time. Use it while navigating in a file with arrows and toggle a breakpoint in a given line of code without losing too much focus.
Note that shortcuts triggering actions within the devtools itself often require to focus the devtools to be in focus.
And here's a comprehensive official list of shortcuts from the Chrome DevTools.
If you liked this article, consider sharing (tweeting) it to your followers.