A Debugging Routine You Can Follow

Good debuggers are not people who never create bugs. They are people with a method. Here is one you can follow every time.

1. Reproduce it

Make the bug happen on demand. What exact steps cause it? What input? What browser? A bug you cannot reproduce cannot be fixed. Write the steps down.

2. Read the error (if there is one)

Open the console. Read the message and the first line of the stack trace that is in your code (Reading Console Errors). Fix the first error, because later ones are often caused by it.

3. Isolate it

Shrink the problem. Which function? Which input? Comment out code, or create a minimal example with just the broken part. Often the act of making it small shows the cause.

4. Form a hypothesis

State what you think is wrong: “The total is wrong because price arrives as a string.” A guess you can test is far better than random changes.

5. Test the hypothesis

Use the tool that fits:

6. Fix the cause, not the symptom

If a value is undefined, do not just add ?. to make the error disappear. Ask why it is undefined. The real bug might be an earlier step that failed.

7. Check the fix, and check for siblings

Does it work now? Did it break anything else? Is the same mistake somewhere else in the code?

8. Learn from it

Add a test, a comment or a guard if the bug is easy to repeat. Note the lesson: “Inputs are always strings.”

A worked example

Problem: the cart total shows "1020" instead of 30.

1
2
3
4

const prices = ["10", "20"];            // from input fields, so they are strings

const total = prices.reduce((sum, price) => sum + price, 0);
console.log(total);                      // → 01020

1. Reproduce: adding two prices gives a long string.
2. Error? None. It is a logic error.
3. Isolate: the problem is in the reduce, so log the values: typeof price is "string".
4. Hypothesis: + joins strings, so the numbers must be converted first.
5. Test and fix:

1
2
3

const prices = ["10", "20"];
const total = prices.reduce((sum, price) => sum + Number(price), 0);
console.log(total);                      // → 30

1. Cause, not symptom: ideally convert the values when they are read from the inputs, so the rest of the program works with numbers. That is the better fix.

Useful tricks

• Rubber-duck debugging: explain the code, line by line, to someone or something. Mistakes appear when you have to say what you think happens.
• Binary search: if a bug appeared recently, comment out half the code (or use git bisect) to find which change caused it.
• Take a break. A fresh mind spots what a tired one cannot.
• Check the obvious: spelling, file saved, the right file loaded, cache cleared, the console on the right tab.
• Change one thing at a time, so you know what fixed it.
• Read the documentation for the function you are using. The behaviour you assumed may not be what it does.

Traps to avoid

• Changing many things at once.
• Fixing the symptom with a workaround.
• Ignoring warnings.
• Assuming the bug is in the browser or the library before checking your own code. (It almost never is.)
• Debugging with stale files: hard-reload and disable the cache.