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 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