DEV Community

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

How to style console.logs in Chrome Dev Tools

Arika O on March 27, 2021

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 prett...
Collapse
 
calinzbaenen 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

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
 
calinzbaenen 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
 
calinzbaenen 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

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
 
calinzbaenen 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

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

Giiiiifs!!! Thx for mentioning it :D.

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

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

Thank you.