DEV Community

loading...
Cover image for How to style console.logs in Chrome Dev Tools

How to style console.logs in Chrome Dev Tools

Arika O
WOP
・3 min read

If you're like me and you use console.log as a debugging method by printing things to the console, the least we can do is to make the outputs prettier. What if our logs could be printed in different colors and font sizes, like in the print screen bellow?

Alt Text

In order to style (format) our logs we must use so called format specifiers. They contain the % symbol, followed by a letter that specifies what kind of formatting we want to the apply to our output.

They look like this:

%s - Formats the value as a string
%i or %d - Formats the value as an integer
%f - Formats the value as a floating point value
%o - Formats the value as an expandable DOM element. As seen in the Elements panel 
%O - Formats the value as an expandable JavaScript object
%c - Applies CSS style rules to the output string as specified by the second parameter
Enter fullscreen mode Exit fullscreen mode

Now, let's write some examples. You can follow along by copy-pasting them in your Chrome console and see the result.

Example: print a blue string (apply CSS style)

console.log("%cThis will be formatted with blue text", "color: blue"); 
// outputs: This will be formatted with blue text [in blue color]
Enter fullscreen mode Exit fullscreen mode

We can add as many styles as we wish

console.log("%cTry me on!", "color: #FFFFFF; font-size: 45px; background: #333333; text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;")
// outputs: a Vegas style super shiny string
Enter fullscreen mode Exit fullscreen mode

Styling is not the only thing we can manipulate in the console. We can convert data types (e.g. a number to a string) or output them (e.g. print objects or floats). Just check the examples below.

Example: print a string (convert a number to a string)

console.log("This will be formatted as a string - %s ", 8999); 
// outputs: This will be formatted as an integer - 8999 
Enter fullscreen mode Exit fullscreen mode

Example: print a string (convert an array to a string)

console.log("This will be formatted as a string - %s ", [78, 89, 1024, 47]); 
// outputs: This will be formatted as a string - Array(4) 
Enter fullscreen mode Exit fullscreen mode

You can't actually interact with the output in the console, so you can't see the content of the array since it's just a string.

Example: print an object

console.log('This is an object %o', { obj: { prop1: 'Hello', prop2: "World" }})
// outputs: this is an object {obj: {…}}
Enter fullscreen mode Exit fullscreen mode

You can interact with the output in the console, expand the object and see its properties

Example: print an integer or a float

console.log('Integer: %d, Floating point: %.1f', 12, 7.3)
// output: Integer: 12, Floating point: 7.3
Enter fullscreen mode Exit fullscreen mode

LATER EDIT - grouping specifiers

If we want to use multiple format specifiers at the same time, we can do it like so:

console.log("%cThis will be formatted with blue text This will be formatted as a string - %s", "color: blue", 8999)
// outputs: This will be formatted with blue text This will be formatted as a string - 8999 [all in blue color]
Enter fullscreen mode Exit fullscreen mode

What we do is basically provide all the format specifiers in the first string and then provide the arguments, one by one (in quotes or not, depending on what you're trying to achieve - CSS rules and strings need quotes for example, numbers or arrays don't).

Discussion (14)

Collapse
baenencalin profile image
Calin Baenen

For the CSS one, is there any way to end the CSS styling, or do I need to use another %c format, with the CSS that defines the defaults of the console?

Collapse
arikaturika profile image
Arika O Author

You mean you're trying to use multiple format specifiers at the same time, say one to style and another to print a string?

Collapse
baenencalin profile image
Calin Baenen

Uhh, the last part of the question is confusing, so I'll cut it to "You mean you want to use multiple format specifiers?".
And to answer that: yes. I do want to use multiple.

Thread Thread
baenencalin profile image
Calin Baenen

Though, what if I want to revert to the default? Since I know I can (probably) use multiple %c, but I wouldn't know how to revert the %c.

Thread Thread
arikaturika profile image
Arika O Author

Please check the end of the article, I edited it to show how to use multiple format specifiers at once. As for the reversion, the format specifier only applies to one console log, so the next console log won't have styles applied.

Thread Thread
baenencalin profile image
Calin Baenen

I know. But what if I want to revert in the middle of my console log?

Thread Thread
arikaturika profile image
Arika O Author

Here you go: console.log("%cThis will be formatted with blue text", "color: blue", "This will not be formatted at all, even though we are inside the same console log.");

Collapse
sidhantpanda profile image
Sidhant Panda

Check out this library I built for frontend logging: github.com/sidhantpanda/logt

You can print images from URLs to the console as well :D

Collapse
arikaturika profile image
Arika O Author

Giiiiifs!!! Thx for mentioning it :D.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
arikaturika profile image
Arika O Author

Is it the Apache Groovy tag though :D? Maybe it's just goovy.

Collapse
mafee6 profile image
MAFEE7 • Edited

I knew this but this is in detail yay

Collapse
ra1nbow1 profile image
Matvey Romanov

Pretty good

Collapse
arikaturika profile image
Arika O Author

Thank you.