Common use

console.log( ) | info( ) | debug( ) | warn( ) | error( ) 
Copy the code
console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
Copy the code

These consoles will print the raw string directly in the appropriate color, depending on the event type provided to them

Test the Demo

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        console.log("console log")
        console.info("console info")
        console.debug("console debug")
        console.warn("console warn")
        console.error("console error")
    </script>
    <script>
        console.log("%cText color is green and increased font size"."color: green; font-size: 2rem;")
    </script>
    <script>
        console.log("Multiple styles: %cred %corange"."color: red"."color: orange"."Additional unformatted message");
    </script>
    <script>
        let info1 = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
        console.table(info1)
    </script>
    <script>
        console.group()
        console.log("Test 1st message")
        console.group("info")
        console.log("Suprabha")
        console.log("Frontend Engineer")
        console.groupEnd()
        console.groupEnd()
    </script>
    <script>
        let info2 = {
            "name": "Suprabha"."designation": "Frontend Engineer"."social": "@suprabhasupi"
        }
        console.dir(info2)
    </script>
    <! -- console.dir -->
    <button>Console. log Prints the trigger object</button>
    <button>Console. dir Prints the trigger object</button>
    <script>
        console.log(document.body, 'bodyHtml');
        console.dir(document.body);
        let oButton = document.getElementsByTagName('button');
        oButton[0].onclick = function(event){
            console.log(event.target, 'button1');
        }
        oButton[1].onclick = function(event){
            console.dir(event.target, 'button2');
        }
    </script>
    <script>
        console.assert(false."Log me!")
    </script>
    <script>
        let name = "supi"
        let msg = "Its not a number"
        console.assert(typeof msg === "number", {name: name, msg: msg})
    </script>
    <script>
        console.count("Hey")
        console.count("Hey")
        console.count("Hey")
        console.count("Hey")
    </script>
    <script>
        for (let i = 0; i < 5; i++) {
            console.count()
        }
    </script>
    <script>
        console.time("Time")
        let l = 0;
        for (let i = 0; i < 5; i++) {
            l += i
        }
        console.log("total", l)
        console.timeEnd("Time")
    </script>
</body>
</html>
Copy the code

Results the following

Style console output

You can use the % C directive to apply CSS styles to console output

console.log("%cText color is green and increased font size"."color: green; font-size: 2rem;")
Copy the code

We can add % c multiple times

console.log("Multiple styles: %cred %corange"."color: red"."color: orange"."Additional unformatted message");
Copy the code

console.table( )

Table () allows us to generate a Table in the console. The input must be an array or an object that will be displayed as a table

let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)
Copy the code

group(“group”) & groupEnd(“group”)

To organize the consoles, let’s use console.group () & console.groupend ()

Using console groups, console logs are grouped together, and each group 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()
Copy the code

console.dir( )

Prints the JSON representation of the specified object

let info = {
    "name": "Suprabha"."designation": "Frontend Engineer"."social": "@suprabhasupi"    
}
console.dir(info)
Copy the code

Printing JSON directly may not be obvious, but printing DOM objects is

<button>Console. log Prints the trigger object</button>
<button>Console. dir Prints the trigger object</button>
<script>
        console.log(document.body, 'bodyHtml');
        console.dir(document.body);
        let oButton = document.getElementsByTagName('button');
        oButton[0].onclick = function(event){
            console.log(event.target, 'button1');
        }
        oButton[1].onclick = function(event){
            console.dir(event.target, 'button2');
        }
</script>
Copy the code

console.assert( )

If the first argument is false, it logs the message and traces the stack to the console which just prints the wrong argument, and if the first argument is true, it does nothing, okay

console.assert(false."Log me!")
Copy the code
let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
Copy the code

console.count ( )

This function records the number of times count () is called. This function takes an optional argument label. If label is provided, this function records the number of times count () is called with that particular label

console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")
Copy the code

If the label is omitted, the function records the number of times count () is called on this line

for (let i = 0; i < 5; i++) {
    console.count()
}
Copy the code

time( ) and timeEnd( )

Time () is a better way to keep track of the tiny amount of Time JavaScript takes to execute

console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
   l += i
}
console.log("total", l)
console.timeEnd(! [image.png](/im! [image.png](/img/bVcR26L)
Copy the code