Chrome DevTools Hidden Features - Debug Like a Pro

You use Chrome DevTools daily, but you're probably only scratching the surface. Beyond the Elements and Console tabs lie powerful features that can cut your debugging time in half. Unlock the hidden tools that separate debugging novices from pros.

Core Concept

DevTools is organized into panels, each with its own hidden gems. Here's where to find the power features:

Key Techniques

Practical Examples

Console Power Moves:

// $_ returns the last evaluated expression
2 + 2
$_  // Returns 4

// $0-$4 are the last 5 selected elements in Elements panel
$0.style.border = '2px solid red'

// table() for arrays and objects
console.table([{name: 'Alice', age: 30}, {name: 'Bob', age: 25}])

// group() for organized output
console.group('User Data')
console.log('Name:', user.name)
console.log('Email:', user.email)
console.groupEnd()

// time() for performance measurement
console.time('API Call')
await fetch('/api/data')
console.timeEnd('API Call')  // Prints: API Call: 142ms

// assert() for conditional logging
console.assert(user.age > 0, 'Age must be positive', user)

Network Panel Tricks:

// In Network panel, right-click any request:
// - "Copy as cURL" - replay in terminal
// - "Copy as fetch" - paste into console
// - "Block request URL" - test without this resource

// Filter expressions:
larger-than:100k           // Only show requests > 100KB
status-code:404            // Only 404 errors
method:POST                // Only POST requests
domain:api.example.com     // Only from specific domain
-domain:fonts.google.com   // Exclude domain

// Preserve log across page loads:
// Check "Preserve log" checkbox

Snippets - Reusable Scripts:

// Sources > Snippets > New snippet
// Save frequently used debugging scripts:

// Example: Highlight all images without alt text
document.querySelectorAll('img:not([alt]), img[alt=""]')
  .forEach(img => {
    img.style.outline = '3px solid red'
    console.log('Missing alt:', img.src)
  })

// Example: Export localStorage as JSON
copy(JSON.stringify(localStorage, null, 2))
console.log('localStorage copied to clipboard!')

// Run with Cmd+Enter or right-click > Run

Local Overrides - Persist Changes:

// Sources > Overrides > Select folder for overrides
// Enable "Enable Local Overrides"

// Now when you edit CSS/JS in DevTools:
// - Changes persist across page reloads
// - Files are saved to your local override folder
// - Purple dot indicates overridden files

// Great for:
// - Testing CSS changes without modifying source
// - Debugging production sites
// - Quick prototyping

Why This Matters

• ✓ Faster Debugging - Find issues in seconds instead of minutes with the right tools
• ✓ Better Performance Analysis - Identify exactly where your app slows down
• ✓ Memory Leak Detection - Find and fix leaks before users notice
• ✓ Network Debugging - Simulate real-world conditions and failures
• ✓ Production Debugging - Debug live sites without deploying changes

Cheatsheet

Essential Keyboard Shortcuts:

Pro Tips

Getting Started