Google chrome and Mozilla Firefox allows you to customize the messages providen in the console with the console.log method. But for what can this be useful ? Well, I can not give you a right answer, but i think you'll use to make your debug messages look cooler.
Customization
To customize with css we will use the %c[characters] identifier to enable this feature in the string of the first parameter, the second parameter will be the css string that will be applied to the message, for example :
The previous code should ouput something like :
You can even combine and customize with css different strings within only 1 message, the identifier %c helps the console to differentiate an string from another :
%cThis is the first block and %cHere begins the second block and %cHere the third
All the string needs to be encapsulated in the first parameter of the console.log function, then the others parameters respectively with a css string, for example:
The previous code should ouput something like :
Older versions of Chrome
In Google Chrome & Firefox ( older versions -32) this feature is not available, however there are the default console features whose comes already customized :
And should look like :
Achieve something more awesome
Although use simply css to customize a log message is pretty impressive, there is something more impressive than that ! Customize your logs with Markup, However this feature is achieved with a library.
The library is Log and you can see a working demo here. Then you'll be able to insert markup (read more about markup here) as first parameter of the log function :
0 Comments