Level up your JavaScript debugging skills with these console APIs
Roopkumar Das
Posted on November 6, 2023
Hey bro, I know you are very good in debugging your buggy javascript code and you are comfortable using console.log for everything but i want to present some other console api's that may make process easy than just using console.log.
Here, I won't go into that deep into each api but will present some understanding of each that i think would be enough for you to start using it.
console.count
console.count(label)
I like this API because it gives the count of how many times that line with console.count
is executed. I would appreciate this more than using console.log
and counting each console.log
log.
For example:
function normalFn(num) {
console.log(num);
console.count("Time's Executed");
// .... other stuff
}
for (let i = 0; i < 6; i++) {
if (i % 2 === 0) {
normalFn(i);
}
}
will result in
0
Time's Executed: 1
2
Time's Executed: 2
4
Time's Executed: 3 -> thus total 3 times that line was executed
I know this example seems trivial, but when checking for how many times the line is executed in big loops, counting each console.log
output is non-trivial.
Also, console.countReset(label)
resets the count of that label.
console.error
and console.warn
console.error mdn docs
console.warn mdn docs
console.error(msg)
console.warn(msg)
These APIs will be very helpful to you if you want to know where the error happened and why it happened. This is specifically better than using console.log
because then you have to write a unique message for each line and then have to remember which message corresponds to which part of the code.
For example:
function divideByNum(num1, num2) {
if (num2 === 0) {
console.error("Can't divide a number by zero");
return;
}
return num1/num2;
}
divideByNum(4,0)
This logs a message
Thus you will get to understand why the error happened and also get to know where the error happened with the help of the stack trace below, which tells that this error occurred in the divideByNum
function at line 463:3 (For you, it will be your code line and position on that line; here, I am using dev tools console, thus that's why it is showing this).
But if you don't like the red warning sign, then you can use console.warn
, which does the same thing as above but prints the message in a yellowish color.
console.trace
console.trace()
console.error
and console.warn
are awesome, but there is just a little problem; they don't give a stack trace when running JavaScript with Node, Deno, or even Bun. They just print the error message, and thus they won't have any difference with console.log
in those environments.
But if you do want to print a stack trace in those environments, then console.trace
is just the right tool for you.
For example:
function divideByNum(num1, num2) {
if (num2 === 0) {
console.log("Can't divide a number by zero");
console.trace();
return;
}
return num1 / num2;
}
divideByNum(4, 0);
Will print this result
Can't divide a number by zero
Trace
at divideByNum (/home/roopkumar/.../console-err.js:4:13)
at Object.<anonymous> (/home/roopkumar/.../console-err.js:11:1)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
console.assert
console.assert(assertion, msg)
This API will only print the message that you give in the second argument when the assertion (which is just a boolean expression) is false.
Here is the little example that I wrote on the Node REPL,
> console.assert(true, "Hey I gave true as first arguement");
undefined
> console.assert(false, "Now it is false");
Assertion failed: Now it is false
undefined
See that it only prints the message when the assertion is false.
One of the ways you can use this API is when you are dealing with boolean expressions,
For example:
const age = 17;
console.assert(age >= 18, "Age must be 18 or older");
// If age is 17, this will log an error message.
Here, I would appreciate this more than creating an if loop for console.log
.
These are the 5 console APIs that I use when I try to debug my JavaScript code, and yes, there are more console APIs like console.dir
, console.info
, console.group
, etc. But I feel these don't provide as much value to use as an alternative to console.log
.
But hey, if you do find those other APIs useful, then I would seriously appreciate it if you comment on their usage, both for me to know and consider and for other viewers as well.
These are the APIs I find helpful, and I hope that you will also try to adopt them in your debugging sessions. Sayonara!
Posted on November 6, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.