DEV Community

K.V.Harish
K.V.Harish

Posted on

22 4

Bored of console.log?

A useful and fun thing about console.log is that you can add CSS styles to it. You can do it with the help of %c variable which gets replaced with the respective styles passed in as a parameter.

Alt Text

You can revert the style previously applied using another %c with an empty parameter passed in order.

Alt Text

You can be as creative as you like

Alt Text

You can also reuse styles using variables

Alt Text

This feature can really come in handy when you want to differentiate the console logs added at different parts of the code.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (16)

Collapse
 
teclado profile image
Teclado β€’ β€’ Edited
console.log('###################');

Has just die. RIP.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ β€’
console.table()
console.chairs()

Decorating with consoles πŸ₯

Collapse
 
_alexblokh profile image
Alex Blokh β€’

Remember myself reading a blogpost about how credit cards of millions of people were stolen using an npm package for styling console output. Good old days β˜•οΈ

Collapse
 
ajkachnic profile image
Andrew β€’ β€’ Edited

I remember reading this as well... Do you know the title? I'd like to read it again

EDIT: nvm i found it medium.com/hackernoon/im-harvestin...

Collapse
 
kvharish profile image
K.V.Harish β€’

That's 😱. Thanks Alex and Andrew for sharing. No better way to emphasise on choosing dependencies smartly and carefully.

Collapse
 
kulpras profile image
Prasanna Kulkarni β€’

npmjs.com/package/chalk
this one I used in many node js projects.

Collapse
 
kvharish profile image
K.V.Harish β€’

chalk is a good option to go for.

Collapse
 
skhmt profile image
Mike πŸˆβ€β¬› β€’

Wrote this for fun a while ago that uses one tagged template to color both node.js terminals and frontend dev console text - github.com/Skhmt/ttlog

Collapse
 
kvharish profile image
K.V.Harish β€’

Cool πŸ‘

Collapse
 
pujux profile image
Julian Pufler β€’

Wow! I didn't know that!
I think this is a webkit only thing though, as it surely does not work in terminal. Still an awesome trick!

Collapse
 
kvharish profile image
K.V.Harish β€’ β€’ Edited

Yes seems like it. Like others suggested you can try Chalk or any other alternatives available.

Collapse
 
artiep profile image
artie β€’

That's cool

Collapse
 
forkinspace profile image
Zaza Siv. β€’

Yeah that's cool and all but I don't think anyone would ever choose to debug this way just because they might be "bored of console.log"

Collapse
 
kvharish profile image
K.V.Harish β€’

Ha Ha please do not take the title of this post literally. πŸ˜ƒ

Collapse
 
merichard123 profile image
Richard β€’

This is awesome debugging my JavaScript will be super fun now. It may take a lot longer but it's worth it!

Collapse
 
kvharish profile image
K.V.Harish β€’

πŸ‘

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs