console.log is the most widely used debugging technique used by Javascript developers. While debugging console.log is sprinkled almost anywhere in the code, after code execution, console panel is full of console messages, this blog lists some useful console commands which can help to format and declutter console panel for more meaningful console messages.
console.(log/info/warn/error)
Basic usage
console.log(123);
// 123
console.log("abc", 123);
// abc 123
console.log([1,2,3], "abc", 123);
// Array(3) [ 1, 2, 3 ] abc 123
Substitution in console
console.log("This is a %s example also accept %d number, and %o object too", "substitution", 33, { a: 1 });
Please take care of the sequence of params
Styling in console
console accepts CSS styles we can use %c to pass CSS styles 😎. Styles apply to whatever text is after %c. It can be mixed with substitutions too, but again make sure of the sequence of parameters.
console.log("This is some %cShow off console message", "font-size:30px; color: #fff; background: #3d7e9a");
console.assert
This is generally used for conditional logging, accepts a condition as the first param, and logs the next params only if the given condition is false with Assertion failed error.
const a = 1;
console.assert(a===1, "a is not equal to 1");
//undefined
console.assert(a===2, "a is not equal to 2");
// Assertion failed: a is not equal to 2
console.(time/timeLog/timeEnd)
When we try to measure the performance of a website or a function we use to add console.log(Date.now) before and after a function and do the maths to get execution time. Javascript has a native way to achieve this. console.time marks the start of time, console.timeEnd stops the timer and gives the total time taken. console.time takes label as a parameter in case you want to use multiple timers. console.timeLog can be used anywhere in between to check time elapsed till then.
function checkTime() {
console.time("checkTime");
for (let i = 0; i <= 300000000; i++) {
if (i === 15000000) console.timeLog("checkTime");
}
console.timeEnd("checkTime");
}
checkTime();
// checkTime: 24ms
// checkTime: 396ms - timer ended
console.(count/countReset)
There are times where we want to count how many times a function is called, we need to create a dummy counter just for logging, console.count handles this, every time it is called it increments by 1 and consoles the value against the passed label or default. We can use multiple counters in the same code with different labels. Any counter can be reset with console.countRest passing respective label or nothing in case of default.
console.count("myCounter");
// myCounter: 1
console.count("myCounter");
// myCounter: 2
console.count("myCounter");
// myCounter: 3
console.countReset("myCounter");
// myCounter: 0
console.count("myCounter");
// myCounter: 1
Top comments (1)
Hey, great post. It inspired me to throw 2 more to the mix based on your list :)
2 Console Commands You Might Forget About
Paweł Kowalski ・ Jul 3 ・ 2 min read