Use Chrome DevTools for debugging (Sources panel, breakpoints, watch expressions), console methods beyond log (table, trace, time), debugger statement, VS Code debugger with launch configs, and React/Vue DevTools for framework-specific debugging.
Chrome DevTools:
Console Methods:
Breakpoints:
// Basic logging with formatting
console.log('Value:', value);
console.log('%c Styled', 'color: blue; font-size: 20px');
// Table for arrays/objects
const users = [{name: 'Alice', age: 25}, {name: 'Bob', age: 30}];
console.table(users);
console.table(users, ['name']); // Only show name column
// Stack trace
function foo() {
function bar() {
console.trace('Trace from bar');
}
bar();
}
foo();
// Timing
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // fetch: 123.456ms
// Grouping
console.group('User Details');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();
// Conditional logging
console.assert(value > 0, 'Value should be positive');
// Count calls
function processItem() {
console.count('processItem called');
}