Hello, Habr! I present to you the translation of the article "How to use the JavaScript console: going beyond console.log ()" by Yash Agrawal.One of the easiest ways to debug something in JavaScript is to output the material using console.log. But there are many other methods provided by the console that can help improve debugging.Let's start.The most basic use case is to output a string or group of JavaScript objects. Pretty simpleconsole.log('Is this working?');
Now imagine a scenario when you have a bunch of objects that you need to output to the console.const foo = { id: 1, verified: true, color: 'green};
const bar = { id: 2, verified: false, color: 'red' };
The most intuitive way to output is simply console.log (variable) several times. The problem becomes more apparent when we see how it is displayed in the console.
As you can see, the variable names are not visible, which is not very convenient. This can be solved by combining all the variables into a single console.log ({foo, bar}). It also reduces the number of console.log lines in our code.console.table ()
We can take the next step by putting all this in a table to make it more readable. Whenever you have objects with common properties or an array of objects, use console.table (). Here we can use console.table ({foo, bar}) and the console shows:
console.group ()
It can be used when you want to group or nest the corresponding elements together to be able to read log easily.You can also use it when you have several log statements inside a function, and you want to be able to clearly see the scope corresponding to each statement.For example, if you register user data:
console.group('User Details');
console.log('name: John Doe');
console.log('job: Software Developer');
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 the groups to be collapsed by default. You will need to click the handle button on the left to expand.console.warn () & console.error ()
Depending on the situation, to make your console more readable, you can add logs using console.warn () or console.error (). There is also console.info (), which displays the “i” icon in some browsers.
You can go even further by adding your own style. You can use the% c directive to add styling to any log statement. This can be used to distinguish between API calls, user events, etc.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 also change the font size, font style, and other CSS elements.
console.trace ()
console.trace () prints the stack trace to the console and displays how the code exited at a certain point. There are certain methods that you would like to call only once, for example, deletion from the database. console.trace () can be used to make sure that the code behaves the way we want it to.console.time ()
Another important thing when it comes to frontend development is that the code should be fast. console.time () allows you to synchronize certain operations in the code for testing.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++) {
Hopefully this article has provided some information on the different ways to use the console.