This post is for people who are familiar with the Webkit JavaScript console you find in Chrome and Safari browser. Did you know you can do a lot more with the console than just logging output ?
Console is a great tool for any developer to debug web sites and apps. But did you know you can even style your output with CSS ? Nope ?
Okay, so copy the following code and run it in the console (CTRL + Shift + J)
console.log("%cSee, you can style me!", "font-size:6em; color:#60B660; border:1px solid #eee; font-family:'Open Sans', Arial, sans-serif; text-transform:uppercase;");
See! It is that easy. With a few more parameters in console.log() you can get a style output of the text you pass in as the first parameter with prefix of %c . You pass regular CSS styles in the second parameter to style the output.
If you want to style multiple parts of the string you are outputting, you can do this:
console.log("%cLarge Text! %cSmall Text", "font-size:52px;", "font-size:12px;")
So here we have two %c, to style them differently we need to pass two different strings with the CSS styles to apply on the corresponding part of the string. For more details check the docs on Chrome developer site
A Little More fun
Using this feature of the Webkit Developer tools, I wrote a JavaScript code which does magic on your console ;) Want to see what? Check out this pen (http://codepen.io/depy/pen/uxdpw) and open your developer console.
Console is a great tool for any developer to debug web sites and apps. But did you know you can even style your output with CSS ? Nope ?
Okay, so copy the following code and run it in the console (CTRL + Shift + J)
console.log("%cSee, you can style me!", "font-size:6em; color:#60B660; border:1px solid #eee; font-family:'Open Sans', Arial, sans-serif; text-transform:uppercase;");
See! It is that easy. With a few more parameters in console.log() you can get a style output of the text you pass in as the first parameter with prefix of %c . You pass regular CSS styles in the second parameter to style the output.
If you want to style multiple parts of the string you are outputting, you can do this:
console.log("%cLarge Text! %cSmall Text", "font-size:52px;", "font-size:12px;")
So here we have two %c, to style them differently we need to pass two different strings with the CSS styles to apply on the corresponding part of the string. For more details check the docs on Chrome developer site
A Little More fun
Using this feature of the Webkit Developer tools, I wrote a JavaScript code which does magic on your console ;) Want to see what? Check out this pen (http://codepen.io/depy/pen/uxdpw) and open your developer console.
