6 Tips for JavaScript Console Debugging

If you are a JavaScript developer, you have probably used console.log() a lot to debug your applications. Did you know you could do more than just the plain console.log() logging. In this post, lets look into some debugging tips, that will help you debug your application using the console.

The Basics of Console Logging

Let’s get the basics of console debugging stated first. I am sure most of you must have used these, and incase you are new to JavaScript, here are some of the more common methods for console logging to help debug your application.

console.log – Logs a message or an object to the console.
console.info – Logs a message or an object to the console, which is informational.
console.warn – Logs the console log message as a warning, to indicate a potential problem.
console.error – Logs the console log message as an error, to indicate an error has occurred.

console.log(‘Hello World!’); 
console.info(‘Informational Logging’); 
console.warn(‘Warning to indicate something weird’); 
console.error(‘This is bad, here is the error’);

The above list covers the common console logs that we see in many codebases. These are hugely helpful while debugging, an application, but that’s not all.

Beyond the Basics of Console Logging

To demonstrate all the examples, you can right click -> inspect, and open the console on any browser. And follow along and type the commands on the console to understand them better while reading this post.

Tip #1: console.table()

I only recently learned about the _console.table(), _and really wish I knew about this earlier for better debugging. Let’s define an object _myShoppingCart _below:

const myShoppingCart = [{
  id: "1",
  name: "Banana",
  price: 10,
},
{
  id: "2",
  name: "Apple",
  price: 20,
},
{
  id: "3",
  name: "Orange",
  price: 30,
}];

If I used the usual console.log() to log the myShoppingCart, the result will look like below:

Let’s say you have a huge object, and things would look cleaner and easier to debug if it were in the form of a table. Look nowhere else. You can use the console.table() to print your object in the form of a nice table to get a better view.

Isn’t this looking nice!

**Note: **One thing to keep in mind is that, _console.table() _can only handle upto 1000 rows.

Tip #2: console.assert()

You can use the console.assert() to perform conditional logging, without the use of an if-else condition. The syntax is **console.assert(condition, message). **When a condition passed is falsy, the assertion can be logged. See examples below to understand them better.

You can clear the console using console.clear(); command.

Tip #3: console.trace()

This is another useful console function. console.trace() is used to output a stack trace to the console. This is very useful, if you are stuck at a certain part of the code while debugging, and want to take a deeper look at the stack trace. This is very useful in ensuring that your code is behaving like it is supposed to and help you navigate through the stack trace.

Tip #4: console.count()

This is super useful, if you have the same piece of code running multiple times, and you want to keep a count of it for some reason. See example below to understand it’s usage.

Notice, that every time the same piece of code is executed_, _the console.count() returns the current count along.

Tip #5: console.memory

If you need a quick snapshot of your memory usage, you could use the console.memory property to get the JavaScript heap size information.

This is will come in handy if there is a performance leak that you suspect while the code is running, and get a quick snapshot of the memory usage on the console.

Tip #6: console.time()

The _console.time() _method starts a timer on the console.

var i;
console.time("test1");
for (i = 0; i < 1000000000; i++) {
  // some code
}
console.timeEnd("test1");
VM732:6 test1: 2624.0439453125ms

You can use it to track how long a piece of code takes to run. You can end the timer using the console.timEnd() method. You can pass label to these methods, to keep track of the console logging as shown in the example above.

Conclusion

That’s a wrap. You can play around with all the other console properties and function, by simply, right clicking on your browser and hitting inspect. You can then open the console tab and try these console logging functions that you just learned. Happy Console Logging!

#javascript #web-development