What are common debugging techniques in JavaScript?
A toolkit for finding and fixing bugs.
console methods — log, table, error, and group for structured output.
Breakpoints — pause in DevTools and inspect variables step by step.
debugger statement — drops into the debugger at that line.
Network & Sources tabs — inspect requests and step through code.
Tip: reproduce the bug reliably first, then narrow down — change one thing at a time.
// Console methods
console.log('Basic log');
console.table([{name: 'John', age: 30}, {name: 'Jane', age: 25}]);
console.group('User Details');
console.log('Name: John');
console.log('Age: 30');
console.groupEnd();
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // 'fetch: 142ms'
console.trace('Call stack'); // Shows stack trace
console.assert(age > 0, 'Age must be positive'); // Logs only if false
// debugger statement
function processData(data) {
debugger; // Pauses here when DevTools are open
return data.map(transform);
}
// Styled console output
console.log('%c Error! ', 'background: red; color: white; font-size: 16px');console.table formats arrays/objects as tables. console.group nests related logs. console.time measures duration. console.trace shows the call stack. console.assert only logs when the condition is false (conditional logging). debugger pauses execution for step-through debugging. Styled console.log uses %c with CSS.
Know beyond console.log: table (data), time (performance), trace (stack), assert (conditional). The debugger statement for programmatic breakpoints.
Chrome DevTools breakpoints (conditional, DOM, XHR) show proficiency.