Debugging with DevTools

Debugging with DevTools | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Debugging with DevTools step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Turn a symptom into a reproducible minimal case.
Use breakpoints, scopes, watches, and the call stack deliberately.
Find the first incorrect state instead of patching the final symptom.
Preserve a repaired defect as a regression test.

DEEP EXPLANATION

Build the complete mental model

Debugging is hypothesis testing

Write the expected behavior, observed behavior, and smallest input that reproduces the difference. Form one hypothesis about where the value first becomes wrong, then choose the cheapest observation that could disprove it. Random logs and edits create noise. Use conditional breakpoints for rare states, logpoints when source changes are undesirable, and watch expressions for a small set of important values.

The call stack explains how execution arrived

When paused, inspect the current scope, then walk upward through callers to understand argument origins and control flow. Step over runs the next line, step into follows a call, and step out completes the current function. Network and DOM breakpoints can pause at the boundary where data or structure changes. Start with the first unexpected value, not necessarily the line that finally throws.

A fix is incomplete without protection

After identifying the violated assumption, make the smallest correction at the owning boundary. Remove temporary logging, verify nearby boundary cases, and add a regression test that fails on the old behavior. Record why the case matters rather than copying the implementation into the test. If the problem depends on timing, control the clock or async dependency instead of hoping repeated runs expose it.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Use an invariant to stop early

An assertion surfaces the exact invalid record before a later total becomes NaN.

function lineTotal(item) {
  console.assert(Number.isInteger(item.priceCents), "priceCents must be an integer", item);
  console.assert(Number.isInteger(item.quantity) && item.quantity > 0, "quantity must be positive", item);
  return item.priceCents * item.quantity;
}

Example 2: Protect the discovered boundary

The empty case documents the corrected reduce initial value and prevents recurrence.

function total(items) {
  return items.reduce((sum, item) => sum + lineTotal(item), 0);
}

console.assert(total([]) === 0, "empty cart total is zero");

How to trace this lesson

Write expected versus observed behavior and the smallest reproducing input.
Pause before the suspected boundary and inspect locals plus the call stack.
Step until the first value diverges from the expectation.
Fix the owning assumption, remove probes, and add a regression test.

Common mistakes and corrections

Changing code before reproducing the failure.: Secure a repeatable case so each hypothesis can be evaluated.
Logging whole objects everywhere.: Observe the smallest value that can disprove the current hypothesis.
Testing only the previously failing happy path.: Add the exact regression and adjacent boundaries.

PRACTICE LADDER

Move from recognition to independent work

1
Reduce a failing order total to one record.
2
Use a conditional breakpoint that pauses only on invalid quantity.
3
Trace a bad argument through three stack frames.
4
Repair the cause and write a focused regression assertion.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Debug the first incorrect state

A visible failure may occur several calls after the value first became wrong. Reproduce it, pause before the suspected boundary, inspect local variables and the call stack, then step until expectation and reality diverge. Fixing the earliest incorrect state is usually more durable than patching the final symptom.

A hypothesis keeps diagnostics useful

Console output, breakpoints, watch expressions, network inspection, and assertions answer different questions. State what you believe, choose the smallest observation that could disprove it, and remove temporary logging afterward. Preserve the discovered case as an automated regression test when possible.

RUNNABLE EXAMPLE

Change one assumption at a time

Deliberately change reduce's initial value, predict the wrong average, and use an assertion plus a breakpoint location to isolate the first incorrect total.

function average(values) {
  if (!Array.isArray(values) || values.length === 0) {
    throw new TypeError("A non-empty array is required");
  }
  const total = values.reduce((sum, value) => sum + value, 0);
  return total / values.length;
}

console.assert(average([8, 10, 12]) === 10, "average should be 10");
console.log(average([8, 10, 12]));

function average(values) {
  if (!Array.isArray(values) || values.length === 0) {
    throw new TypeError("A non-empty array is required");
  }
  const total = values.reduce((sum, value) => sum + value, 0);
  return total / values.length;
}

console.assert(average([8, 10, 12]) === 10, "average should be 10");
console.log(average([8, 10, 12]));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

function average(values) {
  return values.reduce((sum, value) => sum + value) / values.length;
}

Reveal repair and explanation

function average(values) {
  if (!Array.isArray(values) || values.length === 0) throw new TypeError('Values required');
  return values.reduce((sum, value) => sum + value, 0) / values.length;
}

The repaired function defines empty-input behavior and an explicit numeric initial accumulator, making its contract and reduction stable.

INDEPENDENT LAB

Build without copying the example

Debug a deliberately faulty order total, record the hypothesis, and write assertions for the discovered boundary cases.

function orderTotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity);
}
// Reproduce, diagnose, fix, and add assertions.

function orderTotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity);
}
// Reproduce, diagnose, fix, and add assertions.

Press Run to execute your code.

Self-review checklist The smallest failing input is recorded. The fix addresses the first incorrect value. Assertions cover empty input and at least two valid orders.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Where should debugging focus first? The earliest incorrect state The final visual symptom only Random nearby lines

2. What should remain after fixing a reproducible bug? A regression test Every temporary console log An ignored exception

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering