Debugging JavaScript: Chrome DevTools Advanced Techniques

Chrome DevTools Advanced Debugging

Master browser debugging tools for efficient development.

Breakpoint Types

// Line breakpoints - click line number

// Conditional breakpoints - right-click line
// Break when: user.id === 5

// Logpoints - log without pausing
console.log('User:', user.name)

// DOM breakpoints - right-click element
// Break on subtree modifications

Console Tips

// Table display
console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]);

// Grouping logs
console.group('User Data');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();

// Timing
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // fetch: 234ms

// Assert
console.assert(user.age > 0, 'Age must be positive');

Performance Profiling

1. Open Performance tab
2. Click Record
3. Perform actions
4. Stop recording
5. Analyze flame chart

Memory Leak Detection

// Take heap snapshots
1. Open Memory tab
2. Take snapshot before action
3. Perform suspected leak action
4. Take another snapshot
5. Compare snapshots

// Look for:
- Detached DOM elements
- Growing arrays
- Event listeners not removed

Network Throttling

// Test slow connections
1. Network tab → Throttling dropdown
2. Choose "Slow 3G" or custom profile
3. Reload page and test

// Block specific requests
1. Network tab → right-click request
2. "Block request URL"

Useful Shortcuts

Cmd/Ctrl + Shift + P  → Command palette
Cmd/Ctrl + P          → Open file
Cmd/Ctrl + Shift + F  → Search all files
Cmd/Ctrl + D          → Select next occurrence

DevTools proficiency dramatically improves debugging speed.