console is a special global object in js global namespace, available in both browser and nodejs envirment(though the nodejs version only provides basic features). Nowadays, it is getting even more powerful, more display options, groups, tables, timing support etc. This post is about the features and api of console object, using Google Chrome browser.
To see all the console.* functions, just run
Almost all console.* api who accept string or labels support string substitution and formatting, a list of supported format specifier are listed below:
|%s||Print the value as a string|
|%i or %d||print the value as an integer|
|%f||print as floating point value|
|%o||print as HTML-like object|
|%O||print as JS-like object|
|%c||apply css styles|
These are all functions for logging output, but they support styles and variable substitutions, which makes them funny to use.
console.log("Node count:", document.body.childNodes.length, "and the current time is:", Date.now()); console.log(1, 2, 3); console.log(document); console.log("%c Text with styles!", "color: red; font-size: large");
console.dirxml() provide interactive data view, but in different formats, the former shows js object view, the later shows html element tree view. See the different result on
console.table() display data with tables:
console.table() requires data being wrapped within an array, Firefox does't have the restriction, you could just give it an object.
console.group() is one of my favourite, usually console output get messy when there are many prints, grouping them together makes console output look way much better, especially when there are multiple chunks of data.
console.profileEnd() end an in progress profile and add the result to Profile panle in DevTools.
console.timeEnd() gives you a timer to keep track of elapsed time, to use multiple timer, give each of them a unique label.
console.timeStamp() add an event to Timeline panel in DevTools when recording.
console.assert() provides a basic assert utility, when exprion evaluates to false, it will call
console.error to print the error message or object.
console.count(label) provide a simple yet useful counting mechanism, it takes an optional label, it will associate a counter to each unique label.
console.memory shows current tab's js process memory information.
You can even print image inside console and have some fun.