This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Grouping and Nesting Console Log Output

    mykola bilokonskymykola bilokonsky

    Organize your log output by grouping your logs into collapsable hierarchies using console.group().

    chrome-devtoolsChrome DevTools
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    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 console.group.

    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 console.group. 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 console.group, details about the first argument.

    Then we say console.groupend. We say console.group, 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.

    Discuss

    Discuss