More Features of the JavaScript Console

Overview

You probably use console.log in all your JavaScript projects. This is a convenient way to see the value of a variable or what is happening while a program is running. But the JavaScriptconsole object has many other features that can help you when working with your projects. This article will introduce some of my favorites, and I hope you will remember to use them in your work!

Note that the examples here are for JavaScript running in a browser. This is similar to JavaScript running in Node.js, but the behavior in Node.js may be slightly different.

console.log

Before we get into other options, let's review what console.log does. console.log outputs messages to the console. You can input an object, an array, an array of objects, a string, a boolean, basically anything you want to print to the console. Here is an example of using console.log and its output:

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

This is the most common debugging method in JavaScript, and also the most common console method. Now let’s talk about some other options!

console.info

console.info is almost the same as console.log. It prints informational messages to the console. As far as I know, there is no real difference between log and info, it just depends on how you classify the message. But if you choose to hide "info" level messages from the browser console, both "log" and "info" messages will be hidden. To use console.info you can do this:

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

Again, the output is almost identical.

console.warn

console.warn prints a warning message to the console. Essentially, it does the same thing as the previous one, but the message has a yellow background in the console and a warning icon (at least in Chrome Dev Tools). Use console.warn when performing some action that might cause errors in your program but does not currently cause any problems. It lets you and your users or other developers know where problems might occur.

console.warn({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

As before, warnings can be printed to the console by passing the same value.

console.error

console.error outputs error information to the console. Essentially, it does the same thing as the previous, but the message has a red background in the console with a red circle with a white "x" error icon (at least in Chrome Dev Tools). When something goes wrong with your program, use console.error. It provides an easy way for other developers to find out the cause of the problem and fix it. It will be able to give you a stack trace of the error so you can look for the error as well.

console.error({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

As before, errors can be printed to the console by passing the same value.

console.table

This is one of my favorite console options, even though I often forget about it. console.table accepts some data that can be displayed in a tabular format and outputs it. Let’s look at a few examples. We start by console.table on the object:

console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });

The output in the dev tools will look similar to this:

It gets each property name of the object and places it in the Index column and the value of the property in the Value column. This happens for each property in the array. So what happens if we output an array of objects? The result will look like this:

I find myself generally using console.log because I'm used to it, but I think there are a lot of times where console.table will work better and output the object for me in a nice, clean, readable way.

console.assert

console.assert is a method that prints a message to the console that a condition you determine was not met. The function takes two arguments: the expression to be evaluated and the error message that should be displayed. Here is 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 can be another very good way to debug your program. The message is only displayed if the assertion fails, so if no message is displayed, you can assume that the expression is evaluating correctly.

console.group and console.groupEnd

console.group and console.groupEnd are ways to logically group many console.log s. You can then hide the group when needed by collapsing it. Fairly easy to use:

console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();

The group may be collapsed as a whole. This can be useful if you need to log a lot of stuff to the console.

in conclusion

In JavaScript, there are many methods available for the console object. They help us develop so that we can filter messages by type; view one or more items in a table; or group them together or collapse them to hide them when needed. It will improve your workflow.

The above are the details of more functions of JavaScript console. For more information about JavaScript console, please pay attention to other related articles on 123WORDPRESS.COM!