Some Javascript console commands are useful
- Tram Ho
console.log() is the legendary command for debugging Javascript . But there are many other commands that can help you debug better or a little mind also helps you have a new experience when debugging javascript
The most basic case of show log in javascript is to display a string
1 | console.log ('Is this working?'); |
Next comes the display of an object
1 2 | const foo = {id: 1, verified: true, color: 'green'}; const bar = {id: 2, verified: false, color: 'red'}; |
When displayed in the console will look like the following
You can see, although two objects have been displayed, but there are no variable names displayed together. To know the variable name, you need to click on it. This can be solved using the following log
1 | console.log ({foo, bar}); |
Then we will see the variable name corresponding to its data and reduce the number of console.log () lines.
console.table ()
In the above example, we have a better way to display variables in a more readable way. When you need to log variables with the same attributes or an array of objects, using console.table() will be great
1 | console.table ({foo, bar}) |
console.group ()
Used when you want to group or nest related logs for easier reading.
It can also be used to clearly see the scope of each log() statement log()
For example, you log a user information
1 2 3 4 5 6 7 8 9 10 | console.group ('User Details'); console.log ('name: John Doe'); console.log ('job: Software Developer'); // Nested Group console.group ('Address'); console.log ('Street: 123 Townsend Street'); console.log ('City: San Francisco'); console.log ('State: CA'); console.groupEnd (); console.groupEnd (); |
You can also use console.groupCollapsed() instead of console.group() if you want to collapse the groups. When you want to display it fully, just click the description button on the left to expand
console.warn () & console.error ()
Depending on the situation, you can display more readable logs using console.warn() or console.error()
Also we can customize, to be able to distinguish more than the types you want to log
1 2 3 4 5 6 7 8 9 | console.log ('% c Auth', 'color: white; background-color: # 2274A5 ', 'Login page rendered'); console.log ('% c GraphQL', 'color: white; background-color: # 95B46A ', 'Get user details'); console.log ('% c Error', 'color: white; background-color: # D33F49 ', 'Error getting user details'); |
You can change font-size , font-style and many other CSS
console.time ()
One important thing in programming is that the code needs to run fast. console.time() helps you know the runtime of the code
1 2 3 4 5 6 7 8 9 10 11 | let i = 0; console.time ("While loop"); while (i <1000000) { i ++; } console.timeEnd ("While loop"); console.time ("For loop"); for (i = 0; i <1000000; i ++) { // For Loop } console.timeEnd ("For loop"); |
Hopefully the article will help you with different ways to use the best console.
Refer
Translated from author Yash Agrawal’s article https://medium.freecodecamp.org/how-to-use-the-javascript-console-going-beyond-console-log-5128af9d573b
Source : viblo