Professional Documents
Culture Documents
Mastering JS Console
Mastering JS Console
Mastering JS Console
Most of the devs out there are like — Let’s print the message in
the browser to know more about this issue. I’m sure that I’m
not the only one doing this. 🤪
console log/info/debug/warn/error
Use placeholders
There are different placeholders that can be used as listed below
%o — which takes an object,
%s — which takes a string, and
%d — which is for a decimal or integer
placeholders
What to color only a specific word from the log message? Here
you go 😄
console.dir( )
Prints a JSON representation of the specified object.
HTML elements in console
Get the HTML elements in the console just like inspecting
elements
HTML Elements
console.table ( )
Want to view JSON in a proper and easily understandable way?
Better visualization of an array of objects huh!
console.count( )
This function logs the number of times that this particular call
to count() has been called. This function takes an optional
argument label.
counter
console.assert( )
This comes quite handy when you only want to print some
selected logs i.e. it will only print the false argument. It does
nothing at all if the first argument is true.
Assertion
console.trace( )
This method displays a trace that shows how the code ended up
at a certain point.
Trace
console.time( )
A dedicated function for tracking the time taken for actions,
console.time() is a better way to track the microtime taken for
JavaScript executions.
console.memory( )
Wondering how our JavaScript applications are using browser
memory?
Memory
console.clear( )
This one is the last but not the least 😁, To clear all the above
console messages which you’ve learned, It’s time to destroy
them with clear() command
// Memory
console.memory()
// Assertion
const errorMsg = 'Hey! The number is not even';
for (let number = 2; number <= 5; number += 1) {
console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg});
}
// Count
for (let i = 0; i < 11; i++) {
console.count();
}
// Table
const items = [
{
name: "chair",
inventory: 5,
unitPrice: 45.99
},
{
name: "table",
inventory: 10,
unitPrice: 123.75
},
{
name: "sofa",
inventory: 2,
unitPrice: 399.50
}
];
console.table(items)
// Clear
console.clear()
// HTML Element
let element = document.getElementsByTagName("BODY")[0];
console.log(element)
// Dir
const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"}
console.dir(userInfo);
// Color
console.log('%cColor of the text is green plus small font size', 'color: green; font-
size: x-small');
// pass object, variable
const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"}
console.log("Hey %s, here is your details %o in form of object", "John", userDetails);
// Default
console.log('console.log');
console.info('console.info');
console.debug('console.debug');
console.warn('console.warn');
console.error('console.error');