Browser DevTools are your most powerful debugging ally. Master these features to solve problems faster and build better applications.
Elements Panel#
Inspecting and Editing#
1// Select element in console
2$0 // Currently selected element
3$1 // Previously selected element
4$$('selector') // querySelectorAll shorthand
5
6// Edit styles in real-time
7// Click on any CSS property to modify
8// Use up/down arrows to adjust numeric values
9// Shift+up/down for 10x increment
10
11// Force element states
12// Right-click element → Force state → :hover, :active, :focus
13
14// Copy element styles
15// Right-click element → Copy → Copy stylesDOM Breakpoints#
1// Break when element changes
2// Right-click element → Break on:
3// - Subtree modifications
4// - Attribute modifications
5// - Node removal
6
7// Useful for tracking down mysterious DOM changesConsole Panel#
Beyond console.log#
1// Formatted output
2console.log('User:', user);
3console.log('%cStyled text', 'color: blue; font-size: 20px');
4console.log('%o', complexObject); // Object inspector
5
6// Tables
7console.table([
8 { name: 'John', age: 30 },
9 { name: 'Jane', age: 25 },
10]);
11
12// Grouping
13console.group('User Operations');
14console.log('Fetching user...');
15console.log('User fetched');
16console.groupEnd();
17
18// Timing
19console.time('operation');
20await expensiveOperation();
21console.timeEnd('operation'); // operation: 1234ms
22
23// Assertions
24console.assert(user.isAdmin, 'User should be admin');
25
26// Stack traces
27console.trace('How did we get here?');
28
29// Counting
30function handleClick() {
31 console.count('clicks'); // clicks: 1, clicks: 2, ...
32}Live Expressions#
// Pin expressions that update in real-time
// Click "eye" icon in Console
// Enter: document.activeElement
// Watch as focus changesSources Panel#
Breakpoints#
1// Line breakpoints: Click line number
2
3// Conditional breakpoints: Right-click line number
4// Condition: user.id === '123'
5
6// Logpoints: Right-click → Add logpoint
7// Log: 'User:', user, 'at', new Date()
8
9// DOM breakpoints: See Elements panel
10
11// XHR breakpoints: Pause on specific URLs
12// Sources → XHR Breakpoints → Add
13
14// Event listener breakpoints
15// Sources → Event Listener Breakpoints
16// Expand categories and check specific eventsDebugging#
1// Stepping controls
2// F8: Resume
3// F10: Step over
4// F11: Step into
5// Shift+F11: Step out
6
7// Watch expressions
8// Add variables to watch
9// They update as you step through code
10
11// Call stack
12// See the function call hierarchy
13// Click to jump to any frame
14
15// Scope
16// View local, closure, and global variables
17// Modify values while pausedWorkspaces#
// Edit files directly in DevTools
// Sources → Filesystem → Add folder to workspace
// Map to your local files
// Changes save directly to diskNetwork Panel#
Analyzing Requests#
1// Filter requests
2// Type: XHR, JS, CSS, Img, Media, Font, Doc, WS
3// Search: Ctrl+F for URL/content filtering
4
5// Timing breakdown
6// TTFB (Time to First Byte)
7// Content Download
8// Queueing, DNS, TCP, SSL
9
10// Throttling
11// Preset: Fast 3G, Slow 3G
12// Custom: Define exact upload/download/latency
13
14// Block requests
15// Right-click request → Block request URL
16// Test error handlingCopy as cURL#
1# Right-click request → Copy → Copy as cURL
2curl 'https://api.example.com/users' \
3 -H 'Authorization: Bearer xxx' \
4 -H 'Content-Type: application/json' \
5 --data-raw '{"name":"John"}'
6
7# Reproduce exact request in terminalHAR Export#
// Export all requests as HAR file
// Right-click → Save all as HAR
// Analyze offline or share with team
// Import HAR to replay requestsPerformance Panel#
Recording Performance#
1// Record page load: Ctrl+Shift+E
2// Record user interaction: Click record, interact, stop
3
4// Analyze:
5// - Main thread activity
6// - Network requests
7// - Rendering events
8// - Memory usage
9
10// Look for:
11// - Long tasks (> 50ms)
12// - Layout thrashing
13// - Unnecessary repaintsFlame Charts#
1// Reading flame charts:
2// Width = duration
3// Stack depth = call hierarchy
4// Color = type (scripting, rendering, etc.)
5
6// Hover for details
7// Click to zoom into specific function
8// Look for wide blocks (slow operations)Memory Panel#
Detecting Leaks#
1// Heap snapshot comparison
2// 1. Take snapshot (baseline)
3// 2. Perform suspected leaking action
4// 3. Take another snapshot
5// 4. Compare: View → Comparison
6
7// Look for:
8// - Growing object counts
9// - Detached DOM nodes
10// - Large objects that shouldn't existAllocation Timeline#
1// Record allocations over time
2// Blue bars = allocated
3// Gray = freed
4
5// Look for bars that never turn gray
6// These are potential leaksApplication Panel#
Storage Inspection#
1// View and edit:
2// - LocalStorage
3// - SessionStorage
4// - IndexedDB
5// - Cookies
6// - Cache Storage
7
8// Clear storage
9// Application → Clear storage → Clear site dataService Workers#
1// Debug service workers
2// Application → Service Workers
3// - Update on reload
4// - Bypass for network
5// - Offline mode
6
7// Push notifications test
8// Service worker → Push buttonLighthouse#
Performance Audits#
1// Run comprehensive audit
2// Categories:
3// - Performance
4// - Accessibility
5// - Best Practices
6// - SEO
7// - PWA
8
9// Actionable recommendations
10// Click any issue for details and fix suggestionsKeyboard Shortcuts#
General:
Ctrl+Shift+I Open DevTools
Ctrl+Shift+J Open Console
Ctrl+Shift+C Inspect element mode
F12 Toggle DevTools
Console:
Ctrl+L Clear console
Shift+Enter Multi-line input
Ctrl+U Clear current input
Sources:
Ctrl+O Open file
Ctrl+Shift+O Go to symbol
Ctrl+G Go to line
Ctrl+D Select next occurrence
Conclusion#
DevTools mastery transforms debugging from frustrating to efficient. Learn the shortcuts, understand the panels, and practice regularly.
The best debuggers aren't those who know every feature—they're those who know exactly which tool to reach for in each situation.