console.log alternatives you didn't know 😮

console.log alternatives you didn't know 😮

Written by Posandu Mapa on Aug 2nd, 2022 ・ Views ・ Report Post

Posandu Mapa Visit User Profile

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");

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

const { log: myLog } = console;

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

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();

Nice isn't it?

console.table

Useful for printing an array.

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

console.time

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

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. 
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.

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

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");
}

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>

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");

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:

  • Twitter: https://twitter.com/posandu
  • GitHub: https://github.com/posandu

Comments (2)