tldr;
We’ve probably all used console.log in our JavaScript projects. It’s a nice, quick, convenient way to view the value of a variable or to see what’s going on at a given time in the application. But there are many more options with the JavaScript console object that can help while working on your project. We’ll go over some of my favorites in this article, and hopefully you’ll remember to use them while working!
Note that the examples here are for JavaScript running in the browser. Much of this is similar for JavaScript running in Node.js, but the behavior might be slightly different in Node.js.
console.log
Let’s review what console.log does before jumping into the other options. console.log prints a message to the console. You can enter in an object, an array, an array of objects, a string, a boolean. Basically whatever you’d like to print to the console. Here’s an example of using console.log and its output:
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
This has got to be the most used debugging method in JavaScript, and the most used console method. So let’s now go talk about some other options!
console.info
console.info is almost identical to console.log. It prints an informational message to the console. As far as I can tell, there’s no real difference between log and info, except perhaps how you classify the messages. But if you choose to hide the “info” level messages from the browser console, both log and info messages are hidden. To use console.info:
console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };
Again, it’s almost exactly the same output.
console.warn
console.warn prints a warning message to the console. Essentially it’s the same thing as the preceding functions, but the message has a yellow background in the console and a warning icon (at least in the Chrome dev tools). Use console.warn when something is being done that could potentially cause a bug in your application, but that doesn’t currently cause any issues. It allows you, your users, or other developers know that there is a potential for an issue to occur there.
console.warn({ restaurantName: 'Pizza Planet' }); // ⚠️ { restaurantName: 'Pizza Planet' };
Like the preceding options, the same values can be passed to warn to be printed to the console.
console.error
console.error prints an error message to the console. Essentially it’s the same thing as the preceding functions, but the message has a red background in the console and a red circle with a white x error icon (at least in the Chrome dev tools). Use console.error when something goes wrong in your application. It provides an easy way for other developers to track down the cause of the issue and to fix it. It will provide a stacktrace of the error for you to go look for the error as well.
console.error({ restaurantName: 'Pizza Planet' }); // ❌ { restaurantName: 'Pizza Planet' };
Like the preceding options, the same values can be passed to error to be printed to the console.
console.table
Now this is one of my favorite console options, although I forget about it frequently. console.table takes some data that could be placed in tabular form and outputs it. Let’s look at a couple examples. We’ll first start with console.table on an object:
console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });
The output will look similar to this, but in the dev tools:
| (index) | Value |
|---|---|
| restaurantName | Pizza Planet |
| streetAddress | 123 Maple |
It takes each attribute name for the object and puts it in the index column, and the value of the attribute in the Value column. This happens on each attribute in the array. So what happens if we output an array of objects? The result will look like this:
| (index) | restaurantName | streetAddress |
|---|---|---|
| 0 | Pizza Planet | 123 Maple |
| 1 | Pizza Palace | 123 Elm |
I find myself normally reaching for console.log because I’m used to it but I think many times console.table would work better and output the object(s) for me in a nice, clean, readable way.
console.assert
console.assert is a way to print a message to the console if a condition that you determine is not met. The function takes two arguments: the expression to be evaluated and the error message that should be displayed. Here’s an example:
const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
// ❌ Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'
This could be another really good way to debug applications. The message will only show if your assertion fails, so you could assume that the expression is evaluating correctly if no message shows.
console.group and console.groupEnd
console.group and console.groupEnd are ways that you can group logically many console.logs together. You can then collapse the group to hide it when needed. It’s pretty easy to use:
console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();
The group could then be collapsed as a whole. If you’ll be logging a lot of things to the console, this might be really useful.
Conclusion
There are a whole lot of methods to use on the console object in JavaScript. They can help us in our development so that we can filter messages based on type, view the item or items in a table, or group things together and/or collapsing them so that they’re hidden when needed. It’ll take some getting used to using these methods if you’re anything like me, but it will improve your workflow when working on JavaScript articles.
Top comments (0)