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