Debugging Tools

console.log is a solid place to start. Pros go further though, with tools that let you freeze your code mid-run, peek at every variable, and walk through the logic one line at a time. And the most important one is already sitting inside your browser (no download required).

Browser DevTools Overview#

Every modern browser (Chrome, Firefox, Edge, Safari) ships with Developer Tools. Open them with F12 or Cmd+Option+I on Mac. (Safari makes you switch on its developer menu in the settings first.) DevTools has a bunch of panels, and each one is built for a different kind of debugging.

These are the four panels that matter most for debugging.

Step 1. Elements Panel#

Inspect and change HTML and CSS live. You see EXACTLY what the browser rendered, including computed styles and the box model.

Step 2. Console Panel#

Run JavaScript, read errors and logs, and mess with the page using code. It's your command center for quick experiments.

Step 3. Network Panel#

See every HTTP request your app makes, with the headers, response data, timing and status codes. You can't debug API problems without it.

Step 4. Sources Panel#

Set breakpoints, step through code, inspect variables, and make sense of the call stack. This is the heavy hitter of the bunch.

Quick side note. Chrome's DevTools also has a Lighthouse panel that grades your page with a score. Handy, but don't get hypnotized by the number. I've got a client with an honestly abysmal PageSpeed score who still pulls in strong lead flow. Use these tools to fix real problems, not to chase a grade.

The Elements Panel#

Head to the Elements panel when something just LOOKS wrong.

• Inspect element - Right-click any element and pick "Inspect" to jump straight to its HTML and CSS
• Edit live - Double-click HTML or CSS values to change them on the spot
• Box model - See padding, margin and border values drawn out visually
• Computed styles - See the final CSS values after all the cascading shakes out

/* Common issues the Elements panel reveals: */
/* Element hidden by overflow: hidden on parent */
/* Wrong z-index stacking */
/* Unexpected margin collapse */
/* Missing display: flex or grid */

The Console Panel#

The Console does a lot more than show your console.log output. It's a full JavaScript playground.

// Quick experiments right in the console
document.querySelectorAll('.btn').length  // Count buttons on page
 
// Inspect the last selected element
$0  // References the element you selected in Elements panel
 
// Monitor events on an element
monitorEvents($0, 'click')  // Log every click on the element
 
// Copy data to clipboard
copy(JSON.stringify(data, null, 2))
 
// Time how long something takes
console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch');  // Prints something like "fetch: 234.5 ms"

The Network Panel#

When your app isn't loading data right, the Network panel shows you what's really going on.

• Status codes - Is the request coming back 200, 404, or 500?
• Request payload - Is your app sending the right data?
• Response body - What did the server ACTUALLY send back?
• Timing - How long did the request take?
• Headers - Are the authentication tokens going out the right way?

The Sources Panel: Breakpoints#

Breakpoints are the big gun. They pause your code on a specific line so you can look at everything going on right at that moment.

function processItems(items: Item[]) {
  const results = [];
 
  for (const item of items) {
    // Set a breakpoint here to inspect each item
    const processed = transform(item);
    results.push(processed);
  }
 
  return results;
}

There are a few flavors of breakpoint.

• Line breakpoint - Click the line number to pause on that line
• Conditional breakpoint - Right-click the line number and add a condition like item.price > 100
• DOM breakpoint - Pause when a specific HTML element changes
• XHR/fetch breakpoint - Pause when a request goes out to a URL that contains some text you pick
• Exception breakpoint - Pause on the line that throws an error (you choose uncaught only, or caught ones too)

Stepping Through Code#

Once you're paused on a breakpoint, you can walk through your code one line at a time.

Watch Expressions#

Watch expressions let you keep an eye on specific values while you step through code.

// Add these as watch expressions in DevTools:
items.length          // Track array size
currentUser?.role     // Track user permissions
total > budget        // Track a condition

Every time you step to a new line, your watch expressions update by themselves. WAY faster than scattering console.log statements all over the place.

The Call Stack#

The call stack shows how your code ended up on the current line. Read it from the bottom up to follow the chain of function calls.

processPayment    ← You are here (top of stack)
handleSubmit      ← This called processPayment
onFormSubmit      ← This called handleSubmit
handleEvent       ← This called onFormSubmit (React internal)

The call stack is how you answer the question "wait, how did my code even GET here?"

TL;DR#

• The Elements panel shows you CSS and layout problems visually
• The Console is a full JavaScript playground for experiments
• The Network panel tells the truth about API requests and responses
• Breakpoints pause your code so you can inspect everything at that moment
• Stepping through code line by line shows you exactly what happens
• Watch expressions track values without any extra console.log calls
• The call stack shows how your code got to where it is

What's Next?#

You've got some serious debugging tools in your belt now. In the last lesson of this module, we'll look at how Claude can speed up your whole testing and debugging routine by writing tests, explaining errors and suggesting fixes...