DEV Community

Cover image for console.log alternatives you didn't know 😮
Posandu
Posandu

Posted on • Originally published at devdojo.com

console.log alternatives you didn't know 😮

#programming #tutorial #showdev #javascript

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.logging 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:

const { log } = console;

log("hi");
log("testing");
Enter fullscreen mode Exit fullscreen mode

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

const { log: myLog } = console;

myLog("hi");
myLog("testing");
Enter fullscreen mode Exit fullscreen mode

console.group

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

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

console.group("groupName2");
console.log("hi");
console.log("testing");
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

Nice isn't it?

console.table

Useful for printing an array.

const arr = [1, 2, 3, 4, 5];
console.table(arr);
Enter fullscreen mode Exit fullscreen mode

console.time

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

console.time("test");
setTimeout(() => {
    console.timeEnd("test");
}, 1000);
Enter fullscreen mode Exit fullscreen mode

This will give us the following result:

test: 1.000s
Enter fullscreen mode Exit fullscreen mode

console.assert

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

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
Enter fullscreen mode Exit fullscreen mode

console.count

Count the number of times a certain thing happens.

console.count("counter 1");

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

This gives us the following result:

console.trace

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

<!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>
Enter fullscreen mode Exit fullscreen mode

Now you can see where console.trace was called.

debugger keyword

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

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

// ...

buggyCode();

console.log("World");
Enter fullscreen mode Exit fullscreen mode

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

And it tells you where the debugger was called.

Thanks for reading!

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

Connect:

Top comments (0)

Read next

maulikpaghdal profile image

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal -

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

04anilr profile image

What is new feature of React version19

Anil -

dev_girl profile image

Best Memes of Anime Girls Holding Programming Books

Dev Girl -