Why you stop guessing today
Artifact: A clear picture of the chapter and the planted-bugs repo ready to clone
1. The promise
You'll know what this chapter delivers, why guessing is the most expensive habit you can form, and you'll meet the planted-bugs repository you work against by the end of the chapter.
2. The mental model
Guessing for a bug is like searching for your keys by patting the same four pockets over and over. The keys aren't there. You already checked. The win in this chapter is replacing pocket-patting with a search that can't miss.
(DIAGRAM: guessing vs method — flowchart — two columns, left "pat pockets → pat pockets → pat pockets → eventually find or quit", right "hypothesis → experiment → observe → update → cannot miss")
A bug found by guessing takes hours. The same bug, debugged with method, takes minutes. Multiply that by every bug for the rest of your career and the maths gets loud.
Two habits change in this chapter. You'll form a hypothesis before you touch the code. You'll observe one variable at a time.
3. You do it, with me
Open your browser and go to the planted-bugs repository. The link is in the chapter resources panel.
(SCREENSHOT: the planted-bugs repository on GitHub — full window — README visible with the "12 bugs hidden" callout)
You don't clone it yet. You meet it. The repo is a small full-stack app: Next.js front end, NestJS back end, Postgres database. Twelve bugs are hiding in the code. Some scream. Some are silent.
Now skim the chapter index for Ch 20.
(SCREENSHOT: the chapter index for Ch 20 — full window — unit 20.0 highlighted)
Here's the whirlwind of what's coming:
- A four-step debugging loop you can apply to any bug.
- Stack traces, top to bottom, no guesswork.
- Six DevTools tabs, each for the job it was built for.
- The VSCode debugger for both Node and the browser.
- Logging done right and
console.logdone honestly. git bisectto find the exact commit that broke a feature.- A small social skill: asking for help well.
You finish the chapter by working the planted-bugs app.
(SCREENSHOT: the planted-bugs app running locally on localhost:3000 — full window — landing page visible)
One policy on AI debugging up front. Don't paste a stack trace at an AI before you've read it yourself. AI is great at debugging. You need to be good first, then accept help.
4. What you should be seeing
- You can describe the chapter in one sentence: "the four-step loop plus the tools that make each step cheap."
- You know the planted-bugs repo exists and what's in it.
- You know the cadence: short prose, long practice, two windows side by side from 20.3 onwards.
If you can't say what regression means in one sentence, scroll back up and re-read the callout.
5. Common stumbles
- You skip ahead to the assignment. You'll lose hours hunting bugs without the method. Re-do the chapter in order.
- You try every DevTools exercise without an app open. The exercises need the planted-bugs app running locally. Set it up first.
- You read the chapter in one sitting. Don't. The DevTools units are short on prose and long on practice. Set up two windows. This course on the left, your browser with DevTools on the right.