Errors and debugging

Every programmer, from a beginner to an expert, writes code that does not work the first time. Errors are not a sign that you are bad at this. They are normal, and the computer is usually trying to tell you exactly what is wrong. Learning to read those messages calmly, and to hunt for a problem in a methodical way instead of guessing, turns frustration into a skill you will use in every later lesson.

What is a bug?

A Bug is a mistake in a program that makes it behave in a way its author did not intend. Debugging is the work of finding and fixing bugs. The word bug is old engineering slang for a fault, and it has stuck. A bug is almost never caused by the computer being "stubborn". The computer did exactly what the code said. The code said the wrong thing.

Bugs fall into three groups. Knowing which group you are facing tells you where to look first.

Reading an error message

An Error message looks scary but follows a pattern: the kind of error, a short description and usually a place (a file name and a line number). Read it from left to right and ignore the rest at first. In a browser you see these messages in the developer tools console, which a later lesson explores fully. Here is a simulated console showing a typical one.

Here the message says a ReferenceError: the code used the name total, but no variable with that name exists. It happened at line 3 of script.js. Often the real mistake is on that line or just before it. For a missing bracket, the computer can only notice the problem when it reaches something unexpected, so check the line above as well.

A method for debugging

Guessing and changing things at random makes bugs worse. Use the same method every time. It is slow for the first few bugs and fast ever after.

The tool that makes narrowing down easy is console.log. It prints the value of anything you choose, at the moment the line runs, so you can compare what you expected with what actually happened. Add it, run, read, then remove it when you are done.

A worked example: before and after

Wanjiru writes a small program that works out the total cost of 4 pencils at 25 shillings each. She expects 100 but sees 29 on the screen. The program ran with no error message at all, so this is a logic error. Here is her code.

let pencilPrice = 25;
let quantity = 4;
let total = pencilPrice + quantity;
console.log(total);

Step one is to reproduce: the output is 29 every time. Step two is to narrow down. The only calculation is on line 3, so she adds console.log lines to check the inputs.

let pencilPrice = 25;
let quantity = 4;
console.log(pencilPrice, quantity);   // prints 25 4 so the inputs are fine
let total = pencilPrice + quantity;
console.log(total);                    // prints 29

Both inputs are correct, so the fault must be the calculation itself. She used + where she meant *. Step three: change that one thing. Step four: run again and check.

let pencilPrice = 25;
let quantity = 4;
let total = pencilPrice * quantity;
console.log(total);

Now a syntax error, which is easier. This code is missing a closing bracket on the second line, and the console reports SyntaxError: missing ) after argument list. Look at the brackets, not at the rest of the line.

let name = "Amina";
console.log("Hello, " + name;

let name = "Amina";
console.log("Hello, " + name);