Add Styles to Console Statements

By  on  

I was recently checking out Google Plus because they implement some awesome effects.  I opened the console and same the following message:

WARNING!

Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS.

Do not enter or paste code that you do not understand.

I wasn't surprised to see that message but what I did notice was that the text was red and the background was yellow.  The text was even a bit bigger.  How did they do it?  Pretty easily:

console.log("%c%s",
            "color: red; background: yellow; font-size: 24px;",
            "WARNING!");

The first argument is the order of style and message, the second is the style set, and the last is the desired message.

As to why you'd want to use this?  If it helps you identify debug information easier in the console, you may consider calling more attention to some messages!

Recent Features

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

  • By
    Form Element AJAX Spinner Attachment Using MooTools

    Many times you'll see a form dynamically change available values based on the value of a form field. For example, a "State" field will change based on which Country a user selects. What annoys me about these forms is that they'll often do an...

Discussion

  1. Easy, if one controls the browser and therefor the console, that has to display this ;) But Firefox supports this as well, and only IE prints both, the format string as the string itself 1:1 into F12.

  2. There’s a JS library that makes styling comments much easier:

    https://github.com/astoilkov/console.message

  3. By replacing your formatting placeholders with %c%o, it will output a readable repr for any type of object you pass in, not just the str value.

    https://jsfiddle.net/jsatt/Lta6p2jz/2/

  4. very cool advice! my console is very colour ;)

  5. With some trickery you can inject images too!

    console.log("%cDuckie.TV", "color:transparent; font-size: 16pt; line-height: 125px; padding:25px; padding-top:30px; padding-bottom:60px; background-image:url(http://duckietv.github.io/DuckieTV/img/icon128.png); background-repeat:no-repeat; ", "quack!\n\n\n\n\n\n");
    
  6. Amelia BR

    I find it amusing that this post starts with an example of a warning not to copy & paste code into the console, and ends with me wanting to copy & paste code from people’s comments into the console.

    But it’s okay, cause I sort of understand it, right?

  7. schadeck

    I like to put an object at the top of my script when I am developing to create a shortcut for styling my logs:

    // for styling console.log
    // EXAMPLE: console.log(sty.sty, sty.red, 'thingToLog:' ,+ foo);
    var sty = {
        sty: '%c%s',
        grn: 'background:#9c9;color:#141;padding:.25em;line-height:1.5em;',
        ylw: 'background:#ff0;color:#993;padding:.25em;line-height:1.5em;',
        red: 'background:#c99;color:#411;padding:.25em;line-height:1.5em;',
        org: 'background:#da0;color:#830;padding:.25em;line-height:1.5em;',
        gry: 'background:#666;color:#fff;padding:.25em;line-height:1.5em;',
        prp: 'background:#97e;color:#405;padding:.25em;line-height:1.5em;',
        blu: 'background:#8ac;color:#036;padding:.25em;line-height:1.5em;'
    };
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!