Follow

Follow
Learning JavaScript? Series - Debugging like a pro using Console.log()

Learning JavaScript? Series - Debugging like a pro using Console.log()

Omotola Shogunle's photo
Omotola Shogunle
ยทAug 25, 2020ยท

4 min read

One of the ways JavaScript developers debug their code is by using console.log to figure out what the output of a particular variable or condition is. But, what if there is a better way of using this function to give us a better developer experience?

The popular methods to use console.log may look something like this.

const blogger1 = {name : "mycodinghabits", occupation : "software developer", interest : "dancing"}
const blogger2 = {name : "victoria lo", occupation : "web developer", interest : "collecting quotes"}
const blogger3 = {name : "bolaji ayodeji", occupation : "JAMStack developer", interest : "sharing knowledge"}

console.log(blogger1)
console.log(blogger2)
console.log(blogger3)

And the output on the web browser is

Untitled.png

From that log we arent sure who is blogger1, 2 or 3. This is where we can start to do more with console.log. To make this more readable which in turn increases developer happiness, we can do this instead

console.log({blogger1, blogger2, blogger3})

which gives us a better output with our variable names.

Untitled 1.png

Or even better, if our object has the same properties we can use.

Console.table

// TO SEE THE OBJECTS IN AN ARRAY
console.table([blogger1, blogger2, blogger3])

// OR TO SEE THE OBJECTS WITH THEIR VARIABLE NAMES ASSIGNED
console.table({blogger1, blogger2, blogger3})

This gives us Untitled 2.png

The first example is useful when you have

  • an array of objects

and the second when you have

  • objects embedded in another object.

Thats cool, but whats even cooler is if I wanted to log performance of a piece of code which iterates over an array of my objects, I can do this using console.time.

Console.time

In this example, I am trying to compare the performance of using maps instead of for loops. Check out all I had to say about this in this article

const blogger1 = {name : "mycodinghabits", occupation : "software developer", interest : "dancing"}
const blogger2 = {name : "victoria lo", occupation : "web developer", interest : "collecting quotes"}
const blogger3 = {name : "bolaji ayodeji", occupation : "JAMStack developer", interest : "sharing knowledge"}

let array0fObjects = [blogger1, blogger2, blogger3];

//COMPARING PERFORMANCE USING LOOPS AND HIGHER ORDER FUNCTIONS LIKE MAP

// USING LOOPS
console.time("timer for loops")

for(i = 0; i < array0fObjects.length; i++) {
    console.log(`%c Hi ${array0fObjects[i].name}`, "color: green; font-weight: bold; background-color: black")
}

console.timeEnd("timer for loops")

//USING MAP
console.time("timer for maps")

array0fObjects.map(v => console.log(`%c ${v.name} likes ${v.interest}`, "color: yellow; font-weight: bold; background-color: black"))

console.timeEnd("timer for maps")

The output

Untitled 3.png

Bonus - Here you can see that my console logs are prettier, this is because the string formatting I applied using the %c allows me to add styling like you would do in css. Try it!

Console.trace

Have you ever had a bug in your code and wanted to figure out where in your code execution your function was being called? Great! We can use console.trace to do this.

const loopBloggers = () => {
    for(i = 0; i < array0fObjects.length; i++) {
        console.log(`%c Hi ${array0fObjects[i].name}`, "color: green; font-weight: bold; background-color: black")
    }

    //Show me their LIKES! 
    mapBloggers();
}

const mapBloggers = () => {

    console.trace("I was called here")

    array0fObjects.map(v => console.log(`%c ${v.name} likes ${v.interest}`, "color: yellow; font-weight: bold; background-color: black"))
}

loopBloggers();

Untitled 4.png

Keeping in mind that the call stack follows a Last In, First Out Principle, and in this case loopBloggers was pushed into the stack first followed by mapBloggers.

Console.assert

If you want a fancy way of logging errors from your conditinal statements in Javascript, you can use console.assert to do this.

let isPostHelpful = true;

 if(isPostHelpful == true){
    console.log("%c Please share or react to it ๐Ÿ‘๐Ÿพ", 
                "color: black; font-weight: bold; background-color:yellow")
 }
 else{
     console.assert(false, "Comment below what you would like to see in this series")
 }

isPostHelpful == true

Untitled 5.png

isPostHelpful == false

Untitled 6.png

If you want to take your debugging skills to an even higher level, you can use the browser debug tools as demonstrated here.

BONUS - If doing that doesn't help maybe the LOGIC is wrong, consider rubber ducking. This is a technique that is used to work through your code line by line by telling a rubber duck what you think your code should be doing. That way you might find flaws in your logic or your code.

Animated GIF-downsized_large.gif

Thank you for reading! Hope you learn something new! Like, share, react to the post so others can see it.

ย 
Share this