console.log alternatives you didn't know 😮
Tags: programming, tutorial, showdev, javascript
Published: 2022-08-03 12:12:56

Now, think that you are writing some JS code and it doesn't work correctly. What's the first thing you do? You are `console.log`ging it! So I'm going to tell you some alternatives for `console.log`.

## Use destructuring

By using the destruction power of javascript objects, you can do this:

```js
const { log } = console;

log("hi");
log("testing");
```

You can change the `log` function to any other name you want like this:

```js
const { log: myLog } = console;

myLog("hi");
myLog("testing");
```

## `console.group`

Ever wanted to group your logs? This method is perfect for you!

```js
console.group("groupName");
console.log("hi");
console.log("testing");
console.groupEnd();

console.group("groupName2");
console.log("hi");
console.log("testing");
console.groupEnd();
```

![](https://user-images.githubusercontent.com/76736580/182370493-7767d697-e566-4c49-92cb-05d165ab2436.png)

Nice isn't it?

## `console.table`

Useful for printing an array.

```js
const arr = [1, 2, 3, 4, 5];
console.table(arr);
```

![](https://user-images.githubusercontent.com/76736580/182370737-70aaa896-1ab8-4a54-995a-8428980df357.png)

## `console.time`

This method is used to measure time. For example, checking how many seconds it went to complete the x task?

```js
console.time("test");
setTimeout(() => {
    console.timeEnd("test");
}, 1000);
```

This will give us the following result:

```
test: 1.000s
```

## `console.assert`

This method is used to check if a condition is true. If it's not, it will throw an error.

```js
console.assert(/** Condition **/, /** Error message **/);


console.assert(1 === 1, "1 is equal to 1"); // No error
console.assert(0 === [], "0 is equal to []"); // Error in the console
```

![](https://user-images.githubusercontent.com/76736580/182371841-3df01141-216a-4727-856b-5cccbc6eadba.png)

## `console.count`

Count the number of times a certain thing happens.

```js
console.count("counter 1");

for (let i = 0; i < 10; i++) {
    i % 2 == 0 ? console.count("counter 1") : console.count("counter 2");
}
```

This gives us the following result:

![](https://user-images.githubusercontent.com/76736580/182372290-97fa3235-5a8a-4320-965d-caaaf1afcf08.png)

## `console.trace`

This method traces where it was called. I have an HTML file like this:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <script>
            "test";

            console.trace();

            i = 0;
        </script>
    </body>
</html>
```

Now you can see where `console.trace` was called.

![](https://user-images.githubusercontent.com/76736580/182372829-db2ad062-8c3c-4596-91a4-3c87bf828414.png)

## `debugger` keyword

You may not hear about the `debugger` keyword. It's a keyword that is used to stop the execution of the code.

```js
const buggyCode = () => {
    debugger;
    console.log("hi");
};

// ...

buggyCode();

console.log("World");
```

And this pauses the execution of the code and you can see something like this:

![](https://user-images.githubusercontent.com/76736580/182373219-422af3f1-ab37-4555-8459-ebe6e1aae2aa.png)

And it tells you where the debugger was called.

![](https://user-images.githubusercontent.com/76736580/182373345-a98e989b-545c-41a7-ae4a-c0ba55f6ea4c.png)

## Thanks for reading!

Thanks for reading this tutorial. Hopefully, you've learned something new and you're ready to start using it.

Connect:
- Twitter: https://twitter.com/posandu
- GitHub: https://github.com/posandu