Still using console.log()? You out!

Original post by Harsha Vardhan

Translator: Awkward and romantic

Stop Using console.log() In JavaScript

Personal translation, reprint please indicate the source

Are you a JavaScript developer who regularly uses console.log() to debug code? There’s nothing wrong with that. However, what you may not know is that console objects have many other useful methods. In this article, I want to talk to you about how to use these methods effectively.

Why use a console object

The console object in JavaScript makes it possible to debug code from the browser console by printing the values of variables used in the code. In general, this can be used to check if the correct values are passed in your code.

I’m sure most developers have used console.log() to print values on the browser console. However, log is just one of the methods of the Console object. There are several other very useful methods

1. console.log()

This is the method we use most often when we want to print a value in the console. Any type of value can be passed in as an argument to the log() method, be it a string, array, object, Boolean, etc.

console.log('JavaScript'); 
console.log(7);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1.2.3]);
console.log({a: 1.b: 2.c: 3});
Copy the code

2. console.error()

This method is useful when testing your code. It is used to output errors to the browser console. By default, error messages are highlighted in red.

console.error('Error found');
Copy the code

3. console.warn()

This method is also used to test code. Typically, it is used to throw warnings to the console. By default, warnings are highlighted in yellow.

console.warn('Warning! ');
Copy the code

4. console.clear()

This method is used to clear the contents of the console. This method is usually called if the console is blocked by messages/errors. The contents of the console will be cleared, and a message “Console contents cleared” will be printed in the console.

console.clear()
Copy the code

5. console.time() and console.timeEnd()

The two methods need to be used in combination. Whenever we want to know how long a piece of code or a function takes to run, we can use the time() and timeEnd() methods. Both methods accept a string as an argument. Be sure to pass the same string in both functions to measure the time interval.

console.time('timer'); 

const hello =  function(){
  console.log('Hello Console! ');
}
const bye = function(){
  console.log('Bye Console! ');
}
hello(); // calling hello();
bye(); // calling bye();

console.timeEnd('timer');
Copy the code

6. console.table()

This method generates a table in the console based on the values passed in to improve readability. Arrays or objects can generate a table.

console.table({a: 1.b: 2.c: 3}); 
Copy the code

7. console.count()

This method counts the number of times a function is called. Can be used to see how many times a particular value is executed in a loop.

for(let i=0; i<3; i++){
  console.count(i);
}
Copy the code

8. console.group() and console.groupEnd()

The methods group() and groupEnd() allow us to group content in a separate block, and display it in indentation. Just like time() and timeEnd(), they take a parameter of the same value as a label. You can expand and collapse this group in the console.

console.group('group1'); 
console.warn('warning'); 
console.error('error'); 
console.log('I belong to a group'); 
console.groupEnd('group1'); 
console.log('I dont belong to any group');
Copy the code

Bonus time: Style your log

You can also add styles to the console log to make the log look more interesting. The method is simple. All you need to do is pass in the CSS style as the second argument to the log() function, and the first argument string begins with % C. These styles will replace %c in log.

const spacing = '10px'; 
const styles =  `padding: ${spacing}; background-color: white; color: red; font-style: italic; border: 1px solid black; font-size: 2em; `; 
console.log('%cI am a styled log', styles);
Copy the code

conclusion

The Console object is very useful for developers to debug code. As developers, we tend to just use the basic log function. We should take advantage of the tools provided by the Console object, which will be very helpful in debugging and will allow us to see the data we want more visually. I hope this article will be helpful.

Thank you for reading

Note: I have done a post about Chrome developer tools, and I hope you can get some inspiration from it.

I have set up a technical communication group. Every day, I will send small English cards related to technical terms in the group. Everyone can add me “Xiedaimala03” into the group and remark “Programmer English” when adding me.

Welcome to pay attention to the public account “front view” to get daily English cards.