Add Styles to Console Statements
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!
![CSS Gradients]()
With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...
![An Interview with Eric Meyer]()
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
![Link Nudging Using Dojo]()
In the past we've tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other JavaScript frameworks, we're going to try to duplicate that effect with another awesome framework: Dojo.
The JavaScript: Attempt...
![Image Reflections with CSS]()
Image reflection is a great way to subtly spice up an image. The first method of creating these reflections was baking them right into the images themselves. Within the past few years, we've introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without...
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.
There’s a JS library that makes styling comments much easier:
https://github.com/astoilkov/console.message
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/
very cool advice! my console is very colour ;)
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");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?
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;' };