Debugging JavaScript Like a Pro

Beyond console.log

Your browser has powerful debugging tools.

Console Methods

// Formatted output
console.log('User:', user);
console.table(users);  // Array as table
console.dir(element);  // DOM element properties

// Grouping
console.group('API Call');
console.log('URL:', url);
console.log('Response:', data);
console.groupEnd();

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

Debugger Statement

Pause execution:

function processOrder(order) {
    debugger;  // Opens DevTools here
    // Step through code
}

Breakpoints

In DevTools Sources tab:

1. Click line number to set breakpoint
2. Right-click for conditional breakpoints
3. Use "Pause on exceptions"

Watch Expressions

Track values as you step:

1. Open DevTools > Sources > Watch
2. Add expressions: user.name, items.length

Network Tab

Debug API issues:

• Filter by XHR/Fetch
• Check request headers/body
• View response data
• Look at timing

Reading Stack Traces

Error: Cannot read property 'name' of undefined
    at getUser (app.js:45)
    at handleClick (app.js:23)
    at HTMLButtonElement.onclick (index.html:10)

Read bottom to top: click → handleClick → getUser (error here)

Common Issues

// Async timing
console.log(data);  // undefined
await fetchData();
console.log(data);  // now has value

// Reference vs value
const arr = [1, 2, 3];
console.log(arr);  // Shows current state when expanded
console.log([...arr]);  // Shows state at log time