You probably use 10% of Chrome DevTools. Here are the features that’ll make you wonder how you lived without them.

1. console.table() — Structured data in a table

Stop squinting at nested objects in the console.

const users = [
  { name: "Alice", role: "admin", active: true },
  { name: "Bob", role: "user", active: false },
  { name: "Charlie", role: "user", active: true },
]
console.table(users)

Renders a sortable, filterable table. You can even pick which columns to show: console.table(users, ['name', 'role']).

2. copy() — Copy anything to clipboard

In the console, copy() serializes any value and copies it to your clipboard.

// Copy a network response as JSON
copy(await (await fetch('/api/users')).json())

// Copy a DOM element's computed styles
copy(getComputedStyle(document.querySelector('.header')))

No more manually selecting and copying from the console output.

3. $0 through $4 — Recently selected elements

Click an element in the Elements tab, then go to the Console. $0 is the element you just selected. $1 is the one before that, up to $4.

// Get the selected element's bounding box
$0.getBoundingClientRect()

// Check all event listeners on it
getEventListeners($0)

4. Network request blocking

Right-click any request in the Network tab → “Block request URL.” The page will behave as if that resource failed to load. Perfect for testing:

• What happens when your API is down?
• Does the app handle missing images gracefully?
• What’s the page like without third-party scripts?

You can also block patterns: *.js blocks all JavaScript, api.example.com/* blocks all API calls.

5. Performance Monitor (real-time)

Cmd+Shift+P → “Show Performance Monitor.” You get a real-time dashboard showing:

• CPU usage
• JS heap size
• DOM nodes count
• Layout recalculations per second
• Style recalculations per second

Leave it open while using your app. If DOM nodes keep climbing, you have a memory leak. If layouts/sec spikes, you have a layout thrashing problem.

6. Local Overrides — Edit production sites

Sources tab → Overrides → Select a local folder. Now any file you edit in DevTools persists across page reloads. You can:

• Test CSS changes on production without deploying
• Mock API responses by overriding fetch results
• Debug minified code by replacing it with source

The changes only apply in your browser. Nobody else sees them.

7. monitorEvents() — Watch all events on an element

// See every event fired on the document
monitorEvents(document, 'click')

// Watch specific events
monitorEvents($0, ['focus', 'blur', 'keydown'])

// Stop watching
unmonitorEvents($0)

Invaluable for debugging “why isn’t my click handler firing?” — you can see if the event is even reaching the element.

8. CSS Overview — Full page CSS audit

Cmd+Shift+P → “CSS Overview” → “Capture overview.” You get:

• Every color used on the page (with a visual palette)
• Every font and font size
• Unused CSS declarations
• Media queries summary

This is incredible for design audits. You can instantly see if your page uses 47 different font sizes when it should use 5.

---

Bonus: Cmd+Shift+P is the DevTools command palette (like VS Code’s Cmd+Shift+P). Type anything — “screenshot,” “dark mode,” “coverage” — and you’ll find features you never knew existed.

Related: CSS Flexbox & Grid cheat sheet · JavaScript Array Methods cheat sheet · How Hot Reload Actually Works