🎉💖✨ Error messages are great!

I've long thought that error messages shouldn't be red by default - they should be rainbow-coloured 🌈 and filled with emojis 😍 Why? Because error messages are wonderful! They are usually helpful, and they also mean that there is exciting work to do 👩‍💻

Honestly, it took a little while to feel this way about error messages. How did I do it? I built a structured debugging process 🐛 If you feel overwhelmed when your code throws an error message, or you panic every time a test fails, then try this two-step approach to finding and resolving bugs.

1. 🔎 Find the exact line generating an error

Sometimes you can do this just by reading an error message, sometimes you need to start digging a bit deeper (the second step can help with this).

For example:

var example = new Example()
Uncaught ReferenceError: Example is not defined
    at <anonymous>:1:15

This error message tells us the error is on line 1. When you see an error message, take some time to read it carefully, and note down all the useful information it includes. Do this until you can find the following information at a glance:

• Type of error
• Exact line producing the error

There's other useful info in error messages, but this is enough to start debugging. Once you've got as close to the source of the error as possible, you're ready for step 2.

2. 👀 See what's happening in the code

We all have a number of assumptions about the code we are working on, the next stage will test those assumptions seeing what is actually happening!

You need to start logging out different parts of the code to see what's happening, and compare this to what you thought was happening. You might need to change your mental model of how the code is working.

For example, this code is currently broken, and no error message is thrown:

var fizzbuzz = function(num) {
    if (num % 3 == 0) {
        return 'fizz';
    } else if (num % 5 == 0) {
        return 'buzz';
    } else if (num % 15 == 0) {
      return 'fizzbuzz';
    } else {
      return num
    }
}

The function doesn't return fizzbuzz when I pass in a number that is divisible by 15. As there's no error message, I'm going to use console.log to see what's happening in the code

Here's the code again, with some helpful console.log statements:

var fizzbuzz = function(num) {
    if (num % 3 == 0) {
        console.log(num, 'is divisible by 3');
        return 'fizz';
    } else if (num % 5 == 0) {
        console.log(num, 'is divisible by 5');
        return 'buzz';
    } else if (num % 15 == 0) {
      console.log(num, 'is divisible by 15');
      return 'fizzbuzz';
    } else {
      console.log(num, 'is not divisible by 3 or 5');
      return num
    }
}

Now, when I run the function and pass in 15, I see this output:

fizzbuzz(15);
15 "is divisible by 3"
"fizz"

This shows me that because number which are divisible by 15 are divisible by both 3 and 5, the code is never getting to the second else if condition. Now I know that I need to change the order of the conditional checks.

As well as logging out parameters and variables, you can also log different parts of the code. For example:

var fizzbuzz = function(num) {
    console.log('remainder of dividing by 3:', num % 3);
    if (num % 3 == 0) {
        return 'fizz';
    } else if (num % 5 == 0) {
        return 'buzz';
    } else if (num % 15 == 0) {
      return 'fizzbuzz';
    } else {
      return num
    }
}

This console.log helps us to understand the conditional checks.

Try logging out different parts of the code, and see what they show you.

Conclusion

It's important to avoid changing the code until we know why the change is needed. Try to avoid making guesses, and instead use this two-step approach to investigate and resolve issues.

Sometimes you might have several bugs in the code, so you'll need to repeat this process until they are all resolved!