What you'll be able to do

By the end of this page you should be able to use console.log / console.table / console.error on purpose, set a breakpoint, step through a function, and follow a short debugging checklist instead of random edits.

Previous post: memoization from zero.

Who this is for

  • People who sprinkle twenty logs and still feel lost
  • Beginners who never opened the Sources/Debugger panel
  • Anyone who changes code until the error disappears without knowing why

You can skip this if DevTools debugging is already a habit. This opens Phase 11 — engineering habits.

Start with a question, not a guess

When something is wrong, write one sentence: "I expected X, I got Y, right after Z."

Scenario A — button does nothing. Expected: text appears. Got: silence. After: click handler.

Scenario B — wrong total. Expected: 30. Got: "1020". After: adding price strings.

That sentence picks where to look.

Console tools that earn their keep

console.log("total", total);
console.table(users);
console.error("failed", err);

Scenario A — log with labels so values do not blur together.

Scenario B — table for arrays of objects when you are scanning fields.

Avoid logging huge DOM nodes in a loop — you will freeze the console.

Breakpoints: pause and look

In DevTools → Sources, click a line number to set a breakpoint, then trigger the action.

Scenario A — step over to watch variables change line by line.

Scenario B — conditional breakpoint when you only care about id === 5.

Paused code lets you read locals without inventing more logs.

A tiny practice file

<!DOCTYPE html>
<html>
  <body>
    <input id="a" value="10" />
    <input id="b" value="20" />
    <button id="go">Add</button>
    <p id="out"></p>
    <script>
      document.getElementById("go").addEventListener("click", function () {
        const a = document.getElementById("a").value;
        const b = document.getElementById("b").value;
        // Bug on purpose: string concat. Set a breakpoint on the next line.
        const sum = a + b;
        console.log("a", a, "b", b, "sum", sum);
        document.getElementById("out").textContent = sum;
      });
    </script>
  </body>
</html>

Fix with Number(a) + Number(b) after you see the types in the debugger.

Mistakes I see a lot

1. Fixing symptoms ("add || 0 everywhere") without confirming the root cause.

2. Ignoring the first error in the console and reading later noise.

3. Debugging production minified code without source maps when you could reproduce locally.

4. Leaving debugger; statements committed in shared branches.

What to try before the next post

  1. Reproduce the string-concat bug and fix it with evidence.
  2. Set one breakpoint and step over three lines.
  3. Delete temporary logs when you are done.

Next in this series: common beginner bugs checklist — a practical list of mistakes to scan for.

Try this next outside the series

Engineering habits only stick when they show up in testing, security, and maintenance work.

javascripttutorialsdevelopers