Chrome DevTools is packed with features most developers never discover. I spent years using basic console.log before realizing the toolbox I was ignoring. Here are the tips that changed my debugging workflow forever.

Console Power-Ups

Beyond console.log

Stop littering your code with plain console.log. The console API has much better options:

// Group related logs together
console.group('User Authentication');
console.log('Checking credentials...');
console.log('Token valid:', true);
console.groupEnd();

// Log objects as tables
const users = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
];
console.table(users);

// Conditional logging
console.assert(user.age > 18, 'User must be an adult', user);

// Time operations
console.time('API call');
await fetchData();
console.timeEnd('API call'); // Output: "API call: 234.5ms"

// Count occurrences
function handleClick() {
  console.count('Button clicked');
}

Style Your Logs

Make important logs stand out:

console.log(
  '%c🚨 Critical Error',
  'color: red; font-size: 20px; font-weight: bold;'
);

console.log(
  '%cSuccess %cWarning %cError',
  'color: green',
  'color: orange',
  'color: red'
);

Quick Object Inspection

Use these shortcuts in the console:

// Copy any object to clipboard
copy(someObject);

// Get the currently selected element
$0  // Returns the element selected in Elements panel

// Query selector shortcuts
$('button')   // Same as document.querySelector
$$('button')  // Same as document.querySelectorAll

// Monitor function calls
monitor(functionName);  // Logs when function is called
unmonitor(functionName);

// Get event listeners on an element
getEventListeners($0);

Elements Panel Secrets

Live Edit Anything

• Double-click any text in the DOM to edit it
• Right-click → Edit as HTML for complex changes
• Drag and drop elements to reorder them
• H key hides/shows the selected element
• Delete key removes the selected element

Force Element States

Right-click an element and select Force state to trigger :hover, :active, :focus, or :visited states without actually interacting with the element.

Scroll Element into View

Lost an element off-screen? Right-click it in the DOM tree and select Scroll into view.

Copy Styles Instantly

Right-click any element → Copy → Copy styles. Paste ready-to-use CSS.

Breakpoints Beyond Basics

Conditional Breakpoints

Don’t break on every iteration—only when conditions are met:

1. Right-click the line number
2. Select Add conditional breakpoint
3. Enter a condition: user.id === 'abc123'

Logpoints (Non-Breaking Breakpoints)

Log values without pausing execution or modifying code:

1. Right-click the line number
2. Select Add logpoint
3. Enter: User logged in: ${user.name}

DOM Breakpoints

Break when the DOM changes:

1. Right-click an element in the Elements panel
2. Select Break on → Subtree modifications, Attribute modifications, or Node removal

XHR/Fetch Breakpoints

Break on specific network requests:

1. Go to Sources → XHR/fetch Breakpoints
2. Add a URL substring to match

Network Panel Mastery

Throttle Your Connection

Test how your app performs on slow networks:

1. Open Network panel
2. Click the throttling dropdown (default: “No throttling”)
3. Select “Slow 3G” or create custom profiles

Block Specific Requests

Test error handling by blocking resources:

1. Right-click any request
2. Select Block request URL or Block request domain

Copy as cURL/Fetch

Reproduce any request instantly:

1. Right-click a request
2. Copy → Copy as cURL (for terminal) or Copy as fetch (for JavaScript)

Replay XHR Requests

Right-click any XHR request and select Replay XHR to resend it.

Performance Debugging

Quick Performance Check

Press Cmd/Ctrl + Shift + P and type “Coverage” to see how much CSS and JavaScript is actually used on the page.

Find Layout Thrashing

The Performance panel highlights forced reflows in purple. Look for repeated “Recalculate Style” and “Layout” events—these kill performance.

Memory Leak Detection

1. Open Memory panel
2. Take a heap snapshot
3. Perform the action you suspect is leaking
4. Take another snapshot
5. Compare snapshots to find objects that weren’t garbage collected

Keyboard Shortcuts That Save Time

Shortcut	Action
Cmd/Ctrl + Shift + P	Command palette (search any feature)
Cmd/Ctrl + P	Open file
Cmd/Ctrl + Shift + C	Inspect element mode
Cmd/Ctrl + K	Clear console
Esc	Toggle console drawer
Cmd/Ctrl + ] / [	Switch panels
F8 or Cmd/Ctrl + \	Pause/resume script
F10	Step over
F11	Step into

Hidden Gems

Dark Mode

Settings (F1) → Preferences → Theme → Dark

Local Overrides

Persist changes to files even after refresh:

1. Sources → Overrides → Enable Local Overrides
2. Select a folder for DevTools to save changes
3. Edit any file—changes persist across page loads

Snippets

Save and run JavaScript snippets:

1. Sources → Snippets
2. Create a new snippet
3. Run with Cmd/Ctrl + Enter

Great for repetitive debugging tasks or testing utilities.

Remote Debugging

Debug your phone’s browser from your desktop:

1. Enable USB debugging on your Android device
2. Visit chrome://inspect on desktop Chrome
3. Connect your phone and inspect any tab

My Debugging Workflow

Here’s how I approach debugging now:

1. Reproduce — Find the minimal steps to trigger the bug
2. Isolate — Use conditional breakpoints to pause at the exact moment
3. Inspect — Check variable values in the Scope panel, not console.log
4. Trace — Use the Call Stack to understand how you got there
5. Fix — Make changes with Local Overrides to test without rebuilding

The key insight: DevTools is an IDE for debugging. Treat it that way.

---

What’s your favorite DevTools feature? There are so many hidden gems—I’d love to hear what I missed!