TESTING & DEBUGGING / LESSON 07

Debugging Tools.

Master browser DevTools and IDE debugging features for efficient bug hunting

Written by Andrew Lee JenkinsPublished Oct 5, 202615 min readFree lesson

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

Example

/* 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.

Example

// 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.

Example

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.

Button	Action	What It Does
Resume	Continue	Run until the next breakpoint
Step Over	Next line	Execute the current line and move to the next
Step Into	Go deeper	If the line calls a function, jump inside it
Step Out	Go up	Finish the current function and return to the caller

Watch Expressions

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

Example

// 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.

Example

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...

Loading the lesson…

Loading activities…