Debugging

Debugging means finding and fixing errors in a program. Everyone makes mistakes, even experienced developers, so what matters is not their absence but the skill to find the cause quickly. JavaScript and the browser give you simple and reliable tools for this.

Read the error message

The error message is your first clue. It contains the kind of error, the text and the place in the code: file name, line and column number. In the browser console it looks roughly like this:

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:3:22)
    at app.js:7:1

It says: on line 3 of app.js, in the showUser function, the code tried to read the name property of undefined. The lines below are the call stack: which functions were called on the way to the error.

console.log

The simplest way to see what is going on is to print values to the console. A label before the value keeps you from getting lost when there is a lot of output:

const prices = [120, 80, 300];
const total = prices.reduce((sum, price) => sum + price, 0);
 
console.log('total:', total); // total: 500

Print intermediate results along the way to the error: the place where a value first looks unexpected is where the problem is.

Check the type

Many bugs appear when a value has a different type than expected. For example, a number came from a form field as a string, and + glued it on instead of adding:

const quantity = '2';
 
console.log(quantity + 1);         // 21
console.log(typeof quantity);      // string
console.log(Number(quantity) + 1); // 3

typeof shows right away that the variable holds a string.

console.error and console.warn

Besides log(), the console has methods for important messages. console.error() prints a message as an error, and console.warn() as a warning. In the browser they are highlighted in red and yellow and are easy to spot among the rest of the output:

console.warn('City is not set, using the default');
console.error('Could not save the order');

For arrays of objects, console.table() is handy — in the browser it draws a table.

Developer tools and debugger

Every browser has developer tools — a panel that opens with the F12 key. On the Sources tab you can click a line number to set a breakpoint: the program stops on that line, and you can look at the values of all variables. The debugger keyword in your code has the same effect:

function applyDiscount(price, percent) {
  debugger; // execution stops here if the developer tools are open
  return price - (price * percent) / 100;
}

Once stopped, you run the code one line at a time and watch how the values change.

Common mistake

If you glue an object to a string, you get [object Object] instead of its contents. Print the object as a separate argument or turn it into a string with JSON.stringify():

const user = { name: 'Anna', age: 25 };
 
console.log('User: ' + user);                 // User: [object Object]
console.log('User: ' + JSON.stringify(user)); // User: {"name":"Anna","age":25}

And remember to remove debugging console.log calls and debugger once the bug is found.