Quick Tip: Chrome Developer Tools Shortcut Keys

Sometimes it is the more subtle, less obvious features provided by tools which prove to be surprisingly useful. Interestingly, while such features can save developers considerable time and effort, they are often much less apparent, and thus, occasionally overlooked when compared to their main counterparts.

A noteworthy example of some very simple, yet extremely useful features can be found in just a few of the basic Chrome Developer Tools shortcut keys. Below is a brief description of the most convenient shortcuts I find myself using regularly.

Go to Source (Cmd-O)

Perhaps the most useful short-cut available in the sources panel, Cmd-O allows one to quickly search for a specific source file (thanks to @augiemarcello for this one):
Chrome Developer Tools Command-O

Show Functions (Cmd-shift-O)

Another extremely useful feature in the Sources Panel, Cmd-shift-O displays a list of all functions and their corresponding line numbers within the current source file:
Chrome Developer Tools Command-Shift-O

Clear Console (Cmd-K/)

Clears the console when in focus:
Chrome Developer Tools Command-k

Previous/Next Panel (Cmd-[ / Cmd-])

Toggles between Developer Tools Panels (e.g. Elements, Resources, Network, Sources etc.):
Chrome Developer Tools Command-[]

There are quite a few additional shortcut keys available in Chrome Developer Tools, and Jared has done a excellent job of providing a Devtools cheat sheet. I highly recommend trying some of them out; committing to memory those which you find most useful – and sharing them with others as well.

Tags: , , , ,

{ 2 comments to read ... please submit one more! }

  1. Hi, I just want to know, do you know the short to clear the Networks panel? Let’s say you’re viewing all the calls that are being made, and you want to clear. The shortcut to clear console is Ctrl + L, but on Networks panel, this takes me to address box. I Can clear by clicking the button at the bottom, but I would like to know a shortcut.

  2. Hmm, that I am not particularly sure of. While I have looked in the docs, I could not seem to locate a key command for the network panel, though I’d imagine one should be available as clearing it is a common use-case.

{ 0 Pingbacks/Trackbacks }