Skip to content

Instantly share code, notes, and snippets.

@brianarn
Last active October 22, 2020 23:04
Show Gist options
  • Save brianarn/8866326 to your computer and use it in GitHub Desktop.
Save brianarn/8866326 to your computer and use it in GitHub Desktop.
One Weird Trick to never missing a console.log's output

One Weird Trick to never missing a console.log's output

Friends! Have you ever been developing, littered your code with console statements, and then realized you couldn't find what you were looking for? Have you ever wondered, "How can I make this console.log statement stand out in a crowd?"

WONDER NO MORE!

You can provide a special %c prefix to your logged string, and then all magical and printf-like, you can then provide some CSS to style up that line!

Here's a couple of examples that I was JUST using!

// In one file, in its `leave` method
console.log('%cleave called', 'color: red; font: 30pt Comic Sans MS; font-weight: bold');

// In another file, in its `_backupFocusables` method
console.log('%c_backupFocusables called', 'color: blue; font: 30px Comic Sans MS; font-weight: bold');

Once those were in place, I loaded my application, and just LOOK at how BEAUTIFUL my console is!

OMG SO PRETTY

But wait! That's not all! You can use printf-style args in other places too! In fact, this trick works in MULTIPLE environments! *

SOAMAZING

Make your console prettier TODAY!






* Not currently available in native Firefox console. Void in all design shops. Your mileage may vary. Author not liable for you getting stabbed in the eye for using Comic Sans.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment