Let’s face it, debugging is not the most exciting part of writing code, however it’s an inevitable task we all have to endure.

So why not make the best of it by saving time and working smarter?

Here’s a list of JavaScript tips and tricks that you can use to debug your code in a better, faster and more elegant way.

1. Write faster and more descriptive logs in JavaScript

We all use console.log() in our code, several times a day, whether it’s on the client side or writing a NodeJS application and so we feel like we know this one pretty well. What more can there be to it? Does console.log() have any hidden tricks? Let’s find out.

Let’s say you have the following list of variables:

let user = {name: 'Bob', age: 45, gender: 'male'}
let fruit = {color: 'red', name: 'apple', shape: 'round'}
let car = {brand: 'Toyota', color: 'white', model: 'Corolla'}

and you want to console log each of them.

💩 The bad way to log them would be:

console.log(user)
console.log(fruit)
console.log(car)

Why is this bad? Because this is what you get in the console:

If you’re logging a lot of variables, you don’t know which log refers to which variable.

OK, let’s get a bit smarter, this is not the best way yet, but it’s a bit better:

console.log('user', user)
console.log('fruit', fruit)
console.log('car', car)

By adding the name of the variable as a string before the variable we want to log itself, you now get the name and the content side by side so you know which log belongs to which variable.

😎 The better way

console.log({user, fruit, car})

Whaaaaat? 😱 One single line?

That’s right, and this is what you get in the console:

Pretty neat, huh?

2. Display Tables in JavaScript

Now, let’s say you have a list of variables, this time with a common data structure:

let fruit1 = {name: 'apple', color: 'green', weight: 100}
let fruit2 = {name: 'cherry', color: 'red', weight: 30}
let fruit3 = {name: 'orange', color: 'orange', weight: 120}

Following the previous syntax with the name of the variables inside {} is a good start, but what about inside an array instead, using console.table() ?

console.table([fruit1, fruit2, fruit3])

And… magic!

An actual table in the console, with an index too. Easy to read and fantastic for arrays.

3. Track Time in JavaScript

Another, often overlooked, feature of JavaScript is the ability to track time. No, I’m not talking about setTimeout, I’m talking about plain and simple time tracking. Let’s look at this example:

let x = 0
while (x < 1000000) {x++}

it’s a simple iteration that takes x from 0 to 1,000,000. What we want to track is how long this operation takes. Perhaps you’re running a complex function with lots of data and you want to check how long the operation takes, in order to optimize your code and find bottlenecks.

console.time('count')
let x = 0
while (x < 1000000) {x++}
console.timeEnd('count')

We’ve added a console.time before the loop and a console.timeEnd after, which will be executed once the loop ends. And this is the result in the console:

So, it took 8.6728515625 milliseconds to complete the loop.

4. Track the origin of functions in JavaScript

Let’s look at this simple function, which is declared, then invoked:

const greet = () => 'say hello!'

This is a basic example, but imagine having your function declared on line 35 of a js file, then invoking it in several files. If for some reason you get an error, instead of looking around your files for the function and where it gets called, you can simply add console.trace() to your function:

const greet = () => {
  console.trace('greet function')
  return 'say hello!'
}
greet()

And by invoking the function , you get the following in the console:

which tells you that the function is defined in a file called script.js on line 17 and then is called on the same file on line 20. If you have a lot of files and logging a lot of functions, this will come in very handy.

Do you have any tips and tricks on debugging JavaScript? If so, leave your comments below.