Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Format console.log with CSS and String Template Tags

    John LindquistJohn Lindquist

    The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

    javascriptJavaScript
    cssCSS
    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

    00:00 When you console.log something, it's just a plain, black message. I'll say regular message, and it's just black and white, which is pretty boring. What you can do is add %c, and then log takes additional arguments, where this can be a string of CSS properties.

    00:18 I'll say color red. Now, when this runs, you'll see regular message turned red. Maybe I don't want my whole message red, just this part. I can add another %c here. If I save, you'll see it just adds %c, which means it requires an additional parameter right here to match up with this %c.

    00:40 Basically, saying that these styles end here, so start with this and end with this. I'll hit save here, and I'll have a regular red, and then a black message. Now, you can make this look a little nicer, like a label, if you do a color of white, and then a background color of something like red, which will now have a nice label feel to it.

    01:00 You can even add some additional padding around it. If I said padding, top 05em right, bottom 05em left, and now it has some nice padding on the left and the right. To me, this looks like a nice error label. I'll call this error. Now, you see in my console, I have a nice label error with a black message.

    01:22 Now, I can make this a bit easier to write by extracting this out into a function, which I'll use as a template tag. I'll call this function label, and that's going to return these strings as an array. I'll spread them out, so each of them are passed into console.log.

    01:41 Since label is a template tag, I need the two backticks so that this tag applies to this, and then the output of this function will be spread into console.log. Let's save, and get the exact same result. Now, because this is a tag, I can pass things in, like red, error, this is my error message, and this won't do anything, because I've hard-coded the return value.

    02:06 I need to take these as parameters in here, and pass them in. To do that, a template function takes an array, which has the raw string in there, labeled as raw. I'll de-structure that in the array form, and then return this array again.

    02:23 This will still have the exact same thing. It's just that now we have access to everything that was passed in. Now because raw is a string, I can de-structure this as an array. I'll say raw split, and we'll just split on white space.

    02:40 The first thing is the color, so I'll say color. The second thing is the label, so I'll call that label. The rest in here are the messages combined into a message. We'll just call this message. Color, label, and then the rest is the message.

    02:58 Now, I can take this color, and I'm going to drop it into the background color here, and just use that as a variable in a template string. Let's go ahead and change this into a template string. At the end of it -- and I'm going to format this onto multiple lines, just to make it easier to read -- then the label is going to be here, inside of the %cs.

    03:25 This needs to be a template string as well. The message will land right here as a message that's joined back together, because currently, this is just the rest of an array, and will join it back together into a string.

    03:42 Now when I hit save, I have an error, which is the label. The background color's red, and this is my error message, is the rest of the message here. I can reuse this saying console.log. I want to label this as a "green success yay, it worked!"

    04:01 Hit save, and you can see I have a nice success label on top of this message. Again, label is a function returning an array, which we're spreading into console.log. Spreading means it's passing each of these in as a parameter, another parameter, another parameter into here.

    04:21 The label is basically tearing apart this raw string. We're splitting it using the first value as the color, the second as the label, and the rest as the message, and then forming those back together in the strings necessary to properly console.log them out.

    Discuss

    Discuss