Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Grouping and Nesting Console Log Output

    chrome-devtoolsChrome DevTools

    Organize your log output by grouping your logs into collapsable hierarchies using



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    It's not unusual when we are debugging something or just dumping out a bunch of log output from some process we've written to try to group like things together. For instance, this is a contrived example, but if you're like me, you've probably written code that looks something like this.

    We're going to write a function that takes two arguments. We're going to say console.log, sum called, we're going to say console.log, and then put in \t, which inserts a tab. We can say the first argument was A, console.log, tab. The second argument was, we put B, and then we just return A plus B.

    Then if I call sum two three, I can see that this stuff is all grouped together. Maybe you don't do that. Maybe that's just me. Something that I learned about that made my life a lot easier is something called

    Let me rewrite this function that I just wrote above. Let's call this sum two, AB. We're going to say console.log, or let's just go ahead and say The sum function was called. We're going to say console.log.

    Now we're not putting in tabs here. The first argument was console.log. The second argument was, and then we return A plus B. Before we do that, now we're going to type console.groupend. Now if I call sum two, two and three, I've got this nicely formatted thing.

    I can even close it, and that's really cool. I can dump all sorts of stuff in here. I can, if I wanted to, I could even nest this. I could do groups inside of groups. Let's do sum three. Let's say, details about the first argument.

    Then we say console.groupend. We say, details about the second argument. Then we group end, and then we do one more console.groupend at the end. Now if I say sum three, two and three, you can see I've got these nicely nested messages.