Style console.log messages with CSS
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.
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.
Lol, nice. Teammates will be shocked