Here's Buggsy's personal greatest hits collection. When something isn't working, run through this checklist. The answer is very often in here.
| # | The bug | Example | The fix |
|---|---|---|---|
| 1 | Typo or wrong capitals in a name | userName vs username | Copy-paste names, or use your editor's autocomplete |
| 2 | Missing bracket or quote | if (x > 5 { | Check every (, {, [ and quote has a partner |
| 3 | = instead of === | if (score = 100) | Use === for comparisons |
| 4 | Off-by-one | i <= arr.length | Indexes go from 0 to length - 1 |
| 5 | Forgetting to return | function prints but returns undefined | Add return |
| 6 | String instead of number | prompt gives "5", so "5" + 1 is "51" | Convert with Number() |
| 7 | Forgetting () when calling | showMenu instead of showMenu() | Add the parentheses |
| 8 | Using a variable before it exists | using total above let total | Create things before you use them |
| 9 | Shared references | const copy = original | Copy with [...arr] or { ...obj } |
| 10 | Infinite loop | forgot i++ | Make sure the loop's condition can become false |
| 11 | The OR bug | x === "a" || "b" | x === "a" || x === "b" |
| 12 | Reading a property of undefined | user.address.city with no address | Check the value exists first (or use ?., Grade 13) |
The debugging process
When you hit a bug that isn't on the list, follow this process:
- Reproduce it. Make the bug happen reliably. If you can't make it happen on purpose, you can't confirm you've fixed it.
- Read the clues. Error messages, wrong output, the stack trace.
- Isolate it. Narrow down where the problem is. Use
console.logto check values at different points, and find the exact spot where things go from right to wrong. - Form a theory and test it. "I think
totalis a string." Check it withtypeof. - Fix it. Change one thing at a time, so you know what fixed it.
- Test again. Make sure it's really fixed, and that you didn't break something else.
- Learn from it. What caused it? How can you avoid it next time?
🎓 You've completed Summer School! 🎓
You're now a certified bug detective. From here on, when your code breaks (and it will), you'll know exactly what to do: read the clues, shine your flashlight, and track down the culprit.
Now put away your sunscreen and grab your backpack. High School starts now, and it's where things get really interesting.