Although the console object should be in every Front End Developer’s toolbelt, it’s actually a non-standard feature. But in most browsers the API is the same, so let’s checkout some of my favorite methods. I am sure this snippet looks very familiar.
How about this?
log method takes any number of arguments and essentially prints to the console the string representations of each
of argument appended together in ordered list separated by a space.
You can pass it any of the JS primitives, other native objects and even your own custom objects.
The log method also has another API.
Here we pass
console.log a message and substrings which will replace substitution strings in the main string.
dir is the cousin of the
log method. To see the usefulness of dir, type the following into your console:
Not much different than inspecting the page’s source. The document is special and the console gives it special treatment. It outputs the DOM Tree in html format. Now try the following:
Now you can see the document object’s properties and methods.
Console.info, warn and error
These methods work exactly like
log except that output UI and formatting is slightly different.
As you can see, color and iconography are used to classify the outputs. If your using the console API to provide information to user, it’s nice to have some control over how your messages and errors get displayed.
table method is a fun one. It lets you display tabular data in a…table. The example below was lifted from the console
output of the Performance-Analyser
chrome extension (highly recommend you check it out).
I covered some goodies, but for a more comprehensive tutorial visit MDN. I will probably also have some follow ups to this post.