If you are developing a web app or debugging which includes javascript, you’re going to use the console api pretty frequently. JavaScript evaluates a script and will execute without throwing an error and just an “undefined” message. The ability to grab and display errors and messages in console api gives developers a much needed tool to check what’s going on the while executing the code.
One other way to use the console api is to create a message for developers or hackers trying to execute code on your site. You may have seen this on sites like facebook and pinterest. These may create a fun way for coders to play with the code or highlight anything you want.
This is how you accomplish it. The console.log takes can take attributes as well as stylesheet code for the output text. I learned it through an Lynda.com course by Joe Chellman on Debugging The Web: JavaScript.
var bigStyle = 'color:red; font-size:60px; font-weight:bold; font-family:helvetica, sans-serif; text-shadow: 1px 1px 2px black;'
console.log('%c Big Text', bigStyle)
Here the variable “bigStyle” holds the style for the text “Big Text”. And the %c references the stylesheet attribute in the line. You can try it out on your browser JavaScript console on any site or add it to your own site for message to tinkerers and hackers.
In the above example we’ve used two “%c” reference to reference two colors for the different style for two words. You can even try to use the stylesheet right in the console.log function but it would make it for a messy code which may be hard to control. Which is why it’s added to the bigStyle variable. If you were to use it without the bigStyle variable it would be
console.log('%c Big Text', 'color:red; font-size:60px; font-weight:bold; font-family:helvetica, sans-serif; text-shadow: 1px 1px 2px black;');
While you may have reduced the text required for the code to work, it makes it more clunky and prone to mistake if you were to add more style to the text.
Let us know what you think in the comments.
