JavaScript Debugging Skill
Quick Reference Card
Console Methods
console.log('Basic log');
console.info('Info');
console.warn('Warning');
console.error('Error');
// Formatted output
console.table([{ a: 1 }, { a: 2 }]);
console.dir(object, { depth: null });
// Grouping
console.group('Group');
console.log('Inside group');
console.groupEnd();
// Timing
console.time('operation');
doSomething();
console.timeEnd('operation');
// Assertions
console.assert(condition, 'Failed message');
// Counting
console.count('label'); // label: 1, 2, 3...
Debugger
function processData(data) {
debugger; // Pause here in DevTools
const result = transform(data);
return result;
}
DevTools Breakpoints
| Type |
Use Case |
| Line |
Pause at specific line |
| Conditional |
Pause when condition true |
| DOM |
Pause when DOM changes |
| XHR/Fetch |
Pause on network requests |
| Event |
Pause on event listeners |
| Exception |
Pause on errors |
Node.js Debugging
# Start with inspector
node --inspect app.js
node --inspect-brk app.js # Break at start
# Chrome: chrome://inspect
# VS Code: Use launch.json
VS Code launch.json
{
"version": "0.2.0",
"configurations": [{
"type": "node",
"request": "launch",
"name": "Debug",
"program": "${workspaceFolder}/src/index.js"
}]
}
Troubleshooting Patterns
Async Debugging
async function debug() {
console.log('1. Start');
try {
const result = await asyncOperation();
console.log('2. Result:', result);
} catch (error) {
console.error('Error:', error);
console.log('Stack:', error.stack);
}
console.log('3. End');
}
Event Debugging
// Log all events
element.addEventListener('click', (e) => {
console.log('Event:', e.type);
console.log('Target:', e.target);
console.log('CurrentTarget:', e.currentTarget);
console.log('Phase:', e.eventPhase);
});
// Monitor events (DevTools)
// monitorEvents(element, 'click')
Memory Debugging
// Check memory usage
if (performance.memory) {
console.log('Heap:', performance.memory.usedJSHeapSize);
}
// Force garbage collection (DevTools)
// gc()
Network Debugging
// Log fetch requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
console.log('Fetch:', args[0]);
const response = await originalFetch(...args);
console.log('Response:', response.status);
return response;
};
Common Issues
| Problem |
Debug Approach |
| undefined |
Log typeof, check chain |
| NaN |
Log operands, check types |
| Race condition |
Add timestamps, sequence logs |
| Memory leak |
Heap snapshot, check listeners |
| Event not firing |
Log event, check delegation |
Debug Checklist
- Reproduce - Isolate the issue
- Inspect - Check values and types
- Trace - Follow execution flow
- Compare - Working vs broken state
- Fix - Apply smallest change
- Verify - Test the fix
Production Patterns
Error Tracking
window.onerror = (msg, url, line, col, error) => {
console.error('Error:', { msg, url, line, col });
// Send to error tracking service
};
window.onunhandledrejection = (event) => {
console.error('Unhandled rejection:', event.reason);
};
Performance Profiling
// Mark timing points
performance.mark('start');
doWork();
performance.mark('end');
performance.measure('work', 'start', 'end');
console.log(performance.getEntriesByName('work'));
Related
- Agent 08: Testing & Quality (detailed learning)
- Skill: testing: Test debugging
- Skill: performance: Performance profiling
pluginagentmarketplace