Use Javascript console like pro

Suprabha - May 16 '21 - - Dev Community

Every JavaScript developer has used `console.log("message")` .

It provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

In this article we will talk about most of the console methods which everyone should start using.

All the following methods are available in the global instance console, so it is not necessary to require the console module.

Default: console.log( ) | info( ) | debug( ) | warn( ) | error( ) 🔥

These console will directly print the raw string with appropriate color based on the type of event that is provided to them.

console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
Enter fullscreen mode Exit fullscreen mode

default console type

Styling console output 👻

You can use the %c directive to apply a CSS style to console output

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")
Enter fullscreen mode Exit fullscreen mode

Styling console type

We can add %c multiple times.

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
Enter fullscreen mode Exit fullscreen mode

styling multiple console type

1. console.table( )

console.table ( ) allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.

let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)
Enter fullscreen mode Exit fullscreen mode

console table

2. console.group("group") & console.groupEnd("group")

To organize the console, let's use console.group() & console.groupEnd().

Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.

console.group()
    console.log("Test 1st message")
    console.group("info")
        console.log("Suprabha")
        console.log("Frontend Engineer")
    console.groupEnd()
console.groupEnd()
Enter fullscreen mode Exit fullscreen mode

console group and groupEnd

3. console.dir( )

Prints a JSON representation of the specified object.

let info = {
    "name": "Suprabha", 
    "designation": "Frontend Engineer",
    "social": "@suprabhasupi"    
}
console.dir(info)
Enter fullscreen mode Exit fullscreen mode

console dir

4. console.assert( )

Log a message and stack trace to console if the first argument is false.

It will only print the false argument. It does nothing at all if the first argument is true.

console.assert(false, "Log me!")
Enter fullscreen mode Exit fullscreen mode

Example:

let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
Enter fullscreen mode Exit fullscreen mode

console assert

5. 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.

If label is supplied, this function logs the number of times count() has been called with that particular label.

console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
Enter fullscreen mode Exit fullscreen mode

console count with label

If label is omitted, the function logs the number of times count() has been called at this particular line

for (let i = 0; i < 5; i++) {
    console.count()
}
Enter fullscreen mode Exit fullscreen mode

console count without label

6. console.time( ) and console.timeEnd( )

Check the performance of your code in execution time

console.time() is a better way to track the microtime taken for JavaScript executions.

console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
   l += i
}
console.log("total", l)
console.timeEnd("Time")
Enter fullscreen mode Exit fullscreen mode

console time and timeEnd

Reference 🧐

🌟 Twitter 👩🏻‍💻 suprabha.me 🌟 Instagram
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player