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
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Style console.log messages with CSS

    Tomasz ŁakomyTomasz Łakomy
    chrome-devtoolsChrome DevTools

    Sometimes we'd like to ensure that some console.log are really visible one someone opens dev tools window. For instance, we could want to warn our less tech-savvy users that they shouldn't paste anything someone else send them to console, because their account might get stolen.

    In this lesson we are going to learn how to style console.log messages with CSS properties so we can make our messages stand out from the crowd.

    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

    Instructor: 00:00 Here, we have a console.log that is printing a message saying that this message is important. What we would like to do is to ensure that whoever opens the console -- for instance, by accident -- is going to read this very important message.

    00:12 One way we can do that is to add CSS to our console message. To do that, we need to add %c to our message.

    00:21 Also, this console.log is going to actually take two arguments. The first one is the message. The second one is the CSS that you want to apply to our console message.

    00:28 For instance, we can change the color of this text to light blue. We can see the result of it here, as well as increase the font size. I'm going to put font size at 36 pixels. It's going to be very big and it's hard to miss it.

    00:42 We can also specify a background. If I were to do background black, it's also going to be applied.

    00:48 As well, it's possible to change the font family. I'm going to make this text a bit more fancy, like this.

    00:56 Also, it's possible to apply text shadows to the text. If I were to do text shadow, three pixels, three pixels, three pixels, white, this is the result.

    01:06 To recap, if you would like to use CSS in console.log, you need to add %c to your message, which is the first argument of the console.log. The second one is going to be a string specifying what kind of CSS would then apply to your message.

    Discuss

    Discuss