🔧 Level up your JavaScript debugging skills with these console APIs

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 mdn docs

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 mdn docs

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 mdn docs

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!