More features of JavaScript console

Time:2022-5-27
catalogue
  • summary
  • console.log
  • console.info
  • console.warn
  • console.error
  • console.table
  • console.assert
  • console. Group and console groupEnd
  • conclusion

summary

You may have used console in JavaScript projects log。 This is a convenient way to view the value of a variable or what happens when the program is running. However, the JavaScript console object has many other functions that can help when working with projects. This article will introduce some of my favorites. I hope you remember to use them at work!

Note that the example here applies to JavaScript running in a browser. This is the same as in node JavaScript running in. JS is similar, but in node The behavior in JS may be slightly different.

console.log

Before moving on to other options, let’s review console Log function. console. Log outputs the message to the console. You can enter an object, an array, an object array, a string, a Boolean value, basically anything you want to print to the console. This is using console Example of log and its output:


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

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

console.info

console. Info and console Log is almost the same. 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 messages. However, if you choose to hide “info” level messages from the browser console, both “log” and “info” messages will be hidden. To use console You can do this:


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

Similarly, the output is almost identical.

console.warn

console. Warn prints the warning message to the console. Essentially, it has the same function as before, but the message has a yellow background in the console and a warning icon (at least in chrome dev tools). When performing some operations may cause errors in your program, but will not cause any problems at present, please use console warn。 It lets you and your users or other developers know that there may be problems there.


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

As before, you can print warnings to the console by passing the same value.

console.error

console. Error outputs the error message to the console. Essentially, it has the same function as before, but the message has a red background in the console and a red circle with a white “X” error icon (at least in chrome dev tools). When there is a problem with your program, please use console error。 It provides an easy way for other developers to find out the cause of the problem and solve it. It will be able to provide you with stack trace information of errors so that you can also find errors.


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

As before, you can print the error to the console by passing the same value.

console.table

This is one of my favorite console options, although I often forget it. console. Table accepts some data that can be displayed in table form and outputs it. Let’s look at a few examples. Let’s start with the console on the object Table start:


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

The output in dev tools looks similar to this:

(index) Value
restaurantName Pizza Planet
streetAddress 123 Maple

It takes the name of each property of the object and puts it in the index column, and puts the value of the property in the value column. This occurs on each property in the array. So, what happens if we output an array of objects? The results will be as follows:

(index) restaurantName streetAddress
0 Pizza Planet 123 Maple
1 Pizza Palace 123 Elm

I find myself using console Log, because I’m used to it, but I think many times console Table will work better and output objects for me in a beautiful, clean and easy to read way.

console.assert

console. Assert is a way to print messages that do not meet the conditions you determine to the console. The function has two parameters: the expression that requires a value 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 may be another very good way to debug programs. This message is displayed only if the assertion fails, so if no message is displayed, it can be assumed that the expression is evaluating correctly.

console. Group and console groupEnd

console. Group and console Groupend is a group that can integrate many consoles Log logical grouping. You can then collapse the group to hide it when needed. Fairly easy to use:


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

The group may collapse as a whole. This can be useful if you need to record a lot of content on the console.

conclusion

In JavaScript, there are many ways to use console objects. They can help us develop so that we can filter messages according to types; View one or more items in the table; Or they can be grouped together or folded so that they can be hidden when needed. It will improve your workflow.

The above is the details of more functions of JavaScript console. For more information about JavaScript console, please pay attention to other relevant articles of developeppaer!

Recommended Today

A front-end developer's Vim is the same as an IDE

Here is my new configurationjaywcjlove/vim-webI've been grinding it, and it's basically ready to use. Take it out and cheat the star Install The latest version of Vim 7.4+ uses (brew install macvim) installation, vim version updatebrew install macvim –override-system-vim View configuration locations # Enter vim and enter the following characters :echo $MYVIMRC download vim-web Download […]