I spent about two years clicking through Chrome DevTools like a total amateur. Right-clicking elements, hunting through menus, closing and reopening panels because I couldn't figure out how to switch between them. Then one afternoon I was pair programming with a colleague and watched her fingers barely leave the keyboard the entire session. The DevTools panel just... responded. Instantly. I asked her to slow down and show me what she was doing.

What she showed me took maybe twenty minutes to explain. I've been using those shortcuts every single day since. Honestly, the Chrome documentation does list these, but it's buried and not exactly organized in a way that tells you which ones are actually worth your time versus the ones that sound cool but you'll use twice and forget. So here's the filtered version — the stuff that actually sticks.

Opening and Navigating DevTools Fast

The basics first, but bear with me because even here there's a thing most people don't know. Everyone knows F12 or Ctrl+Shift+I (Windows/Linux) and Cmd+Option+I (Mac) opens DevTools. Fine. But here's what most people miss — you can open DevTools directly to a specific panel without clicking around.

Want to jump straight to the Console? Hit Ctrl+Shift+J on Windows or Cmd+Option+J on Mac. Done. No clicking. And to inspect a specific element on the page without right-clicking and selecting "Inspect", use Ctrl+Shift+C (or Cmd+Shift+C). It drops you right into element selection mode. Click the element, you're in the Elements panel on that exact node.

Once you're inside DevTools, switching between panels without touching the mouse is something I wish I'd learned on day one. Press Ctrl+] and Ctrl+[ to cycle forward and backward through panels. Simple. The thing is, once this becomes muscle memory, going back to clicking the panel tabs feels genuinely painful.

Elements Panel Shortcuts Worth Knowing

The Elements panel is where a lot of time gets wasted on mouse work. Here are the ones that actually matter.

When you've got an element selected, pressing H toggles its visibility — it adds visibility: hidden to the element without you editing anything. Super useful for checking layout without an element in the way. And Delete just removes it from the DOM entirely. Temporary, obviously. Refresh and it's back.

Want to edit the element as raw HTML? Press F2. The node turns into an editable text field. This is way faster than double-clicking around trying to find the right spot to click into.

Arrow keys let you expand and collapse DOM nodes. But hold on — Right arrow on a collapsed node expands it one level. Alt+Right arrow (or Option+Right arrow on Mac) expands the entire subtree at once. I use that one constantly when I'm trying to read deeply nested markup.

Console Shortcuts That Change How You Work

The Console has some genuinely good shortcuts that almost nobody uses.

Ctrl+L clears the console. That's the obvious one. But here's the thing — Ctrl+` (backtick) toggles the console drawer open and closed from any panel. So if you're in the Network panel and want to run a quick command, you don't have to switch away. Just pop the drawer open, do your thing, close it. This was genuinely surprising when I first found it.

Up and down arrow keys navigate through your command history in the console. Again, obvious. But Ctrl+Enter runs a multi-line command, while regular Enter executes it immediately. Useful when you're writing a quick function you want to actually check before running.

And $_ in the console references the result of the last expression you evaluated. So if you ran something that returned a big object and forgot to assign it to a variable, $_ still has it. I've saved myself from having to re-run slow operations more than once with that one.

Network Panel: The Underrated Shortcuts

Most people treat the Network panel like a read-only log. But there's some keyboard stuff here that speeds things up a lot.

Ctrl+R (or Cmd+R) triggers a normal page reload while the Network panel is open and recording. Ctrl+Shift+R does a hard reload, bypassing cache. You probably knew that. But what you might not know is you can filter requests without clicking the filter box by just... starting to type. The filter input gets focus automatically when the Network panel is active and you start typing. Small thing, saves a click every single time.

Also, pressing Escape from anywhere in the Network panel opens the console drawer at the bottom (same as the backtick trick). And in the request list, you can use the up/down arrow keys to move between requests once you've clicked one. Then Enter opens the detail pane for that request. Keeps your hands off the mouse entirely while you're stepping through a list of calls.

Two Insider Tricks Most Devs Miss Entirely

Okay, here are the two that I feel like qualify as genuinely insider knowledge.

The Command Menu. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) while DevTools is open. This opens a command palette — like VS Code's command palette, but for DevTools itself. You can do things like take a screenshot of the full page, disable JavaScript, change the color theme, switch to mobile emulation, enable paint flashing. All without navigating menus. Honestly this one thing replaced like fifteen separate menu clicks I was doing every day. If you only take one thing from this post, it's this.

Logpoints instead of console.log. This isn't a keyboard shortcut exactly, but it's a DevTools feature that almost nobody uses. In the Sources panel, right-click on a line number. You'll see an option called "Add logpoint." It lets you add a console.log-style message that fires when that line executes — without actually modifying your code. So you're not adding and removing console.log statements, not committing debug code accidentally, nothing. You just set the logpoint, it logs when that line runs, and when you're done debugging you remove it. The first time I used this I sat back in my chair for a second.

Look, Chrome DevTools has a documentation page that lists every single shortcut, and it's overwhelming. Most of those shortcuts you'll use once. The ones above are the ones that became actual habits — the kind where you catch yourself reaching for them in other tools and feeling annoyed they don't work. Start with the Command Menu and the console drawer toggle, get those into muscle memory, then layer in the rest. You don't have to memorize everything at once.

And if you're the person on your team who still right-clicks every single element to inspect it, no judgment. That was me for way too long.