I spent probably two years opening Chrome DevTools the exact same way every single time. Right-click, Inspect. Like a caveman. And the thing is, nobody corrected me. I'd see senior devs working next to me, their DevTools flying open instantly, panels switching in a blink, and I just assumed they had some kind of muscle memory I hadn't developed yet.

Then one afternoon I accidentally hit the wrong key combo and the command palette appeared. That was it. That was the moment I realized I had been doing this the slow way for years. I went down a rabbit hole that afternoon and came out the other side genuinely annoyed at myself for waiting so long. So here's everything I found, laid out the way I would've wanted it explained to me back then.

Some of this is basic, sure. But I'd bet money there are at least three things on this list you haven't seen before, even if you've been using DevTools for years. That's just how this tool works — it buries good stuff under menus nobody opens.

Table of Contents

• Opening DevTools Fast (and Switching Panels)
• The Command Palette Nobody Uses
• Console Tricks That Save Real Time
• Element Inspection Shortcuts
• Two Insider Tricks Worth Knowing

Opening DevTools Fast (and Switching Panels)

The basics first, because they matter more than people admit.

On Mac, Cmd + Option + I opens DevTools. On Windows and Linux, it's F12 or Ctrl + Shift + I. That's the general open. But here's where it gets faster — you can open directly to a specific panel without clicking around:

• Cmd + Option + J (Mac) / Ctrl + Shift + J (Windows) — opens straight to the Console panel
• Cmd + Option + C (Mac) / Ctrl + Shift + C (Windows) — opens in element inspect mode, cursor ready to click something on the page

That second one is huge. If you need to inspect a specific element, skip the right-click entirely. Hit the shortcut, click the element, done. I use this probably thirty times a day.

And once DevTools is open, switching between panels without touching the mouse? Use Cmd + ] and Cmd + [ on Mac to cycle forward and backward through panels. Windows equivalent is Ctrl + ] and Ctrl + [. It sounds minor but when you're bouncing between Network and Console constantly, it adds up fast.

The Command Palette Nobody Uses

This is the one that got me. With DevTools open, hit Cmd + Shift + P on Mac or Ctrl + Shift + P on Windows. A command palette drops down, same idea as VS Code's. You can type basically anything — "dark mode", "disable cache", "coverage", "screenshot" — and run it without digging through menus.

The screenshot one alone is worth knowing. Type "screenshot" in the palette and you'll see options like "Capture full size screenshot" and "Capture node screenshot." The full-page screenshot captures the entire scrollable page, not just what's visible. No extensions needed. No third-party tools. It's just there.

I honestly don't understand why this isn't more widely known. DevTools has something like 600 commands available through this palette. Most people never open it once.

Console Tricks That Save Real Time

The console has a few things tucked away that most tutorials skip entirely.

$0 through $4. When you click on an element in the Elements panel, DevTools stores a reference to it in the console as $0. The previous one becomes $1, the one before that $2, and so on up to $4. So you can click an element, jump to the console, and just type $0 to interact with it directly in JavaScript. No document.querySelector needed. Quick and dirty, but genuinely useful.

$_ gives you the last result. Whatever the console last evaluated, $_ holds it. If you ran a long expression and want to use the result in another expression without rerunning it, just reference $_.

console.table(). If you're logging arrays of objects, stop using console.log(). Use console.table(yourArray) instead. It renders them in an actual table with sortable columns. Way easier to read, especially for API responses.

And one that trips people up: Shift + Enter in the console lets you write multi-line JavaScript without executing it. Regular Enter submits immediately. Shift + Enter gives you a newline. Sounds obvious, but I saw a developer copy-paste multi-line code into Notepad first and then paste it into the console. For months. He didn't know about Shift + Enter.

Element Inspection Shortcuts

Inside the Elements panel, a few keyboard shortcuts are worth burning into memory.

When you've got an element selected, pressing H toggles its visibility (it adds/removes visibility: hidden in the style). Faster than finding the CSS rule and editing it manually when you're trying to see what's behind something.

Pressing Delete removes the selected element from the DOM entirely. Temporary, obviously — refresh and it's back — but useful for quick visual checks or grabbing a screenshot without some annoying overlay in the way.

And the arrow keys do what you'd expect (navigate the DOM tree), but Option + Arrow on Mac (or Alt + Arrow on Windows) expands or collapses all child nodes at once instead of one at a time. When you're looking at deeply nested markup, this matters.

Two Insider Tricks Worth Knowing

These took me a long time to stumble across. Neither one is in the beginner guides.

Local Overrides. Go to Sources panel, then the Overrides tab. You can map a local folder as an override for any website's files. DevTools will serve your local version of a file instead of the live one — and the changes persist across refreshes. This is completely different from just editing in DevTools, where your changes vanish on reload. With Local Overrides, you can prototype CSS or JS changes on any live site and they stick until you remove them. Useful for client presentations, quick experiments, or debugging production issues where you can't redeploy immediately.

Logpoints. In the Sources panel, you can right-click any line number and add a "logpoint" instead of a breakpoint. Instead of pausing execution, it just logs a message or variable to the console when that line runs. It's like adding a console.log() without actually touching your code. When you're debugging something in a file you don't want to modify — or you're working on a minified production build — this is cleaner than any alternative I've found.

The downside of Logpoints, honestly, is they're a little fiddly to manage if you add a bunch of them. You have to go hunting for them to remove them. But for quick, targeted debugging? Hard to beat.

Look, none of this is secret exactly — it's all documented somewhere in Google's official DevTools docs. But those docs are enormous and kind of overwhelming. Most people land there looking for one specific thing and leave without seeing the rest. Hopefully this saves you the accidental-keypress discovery moment I had and gets you there a bit faster. Your future self debugging a layout issue at 11pm will appreciate it.