Level up your JavaScript debugging skills with these console APIs
Tags: webdev, javascript, beginners, tutorial
Published: 2023-11-06 18:28:10

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](https://developer.mozilla.org/en-US/docs/Web/API/console/count)

```javascript
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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/console/error)
[console.warn mdn docs](https://developer.mozilla.org/en-US/docs/Web/API/console/warn)

```javascript
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:

```javascript
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

![console-error-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6rrq5b8lwlagq3sk7cm.png)

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-warn-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8knzwg7k2vhffpcxnzs.png)

## `console.trace`

[console.trace mdn docs](https://developer.mozilla.org/en-US/docs/Web/API/console/trace)

```javascript
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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/API/Console/assert)

```javascript
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,

```javascript
> 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:

```javascript
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!