Common usage
console.log( ) | info( ) | debug( ) | warn( ) | error( ) console.log("console log")
console.info("console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")These consoles will directly print the original string in the appropriate color based on the type of event provided to them
Test Demo
<!DOCTYPE html>
<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打印触发对象</button>
<button>console.dir打印触发对象</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>
Style console output
You can use the% c directive to apply CSS styles to the console output
console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")We can add% c multiple times
console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");console.table( )
Table () allows us to generate a table in the console. The input must be an array or an object, which will be displayed in the form of a table
let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
console.table(info)group("group") & groupEnd("group")
To organize the console, let us use console.group () & console.groupEnd ()
Using console groups, group console logs together, and 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()console.dir( )
Print the JSON representation of the specified object
let info = {
"name": "Suprabha",
"designation": "Frontend Engineer",
"social": "@suprabhasupi"
}
console.dir(info)It may not be obvious to print json directly, but it is obvious to print dom objects.
<button>console.log打印触发对象</button>
<button>console.dir打印触发对象</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>console.assert( )
If the first parameter is false, log the message and stack the trace to the console
It will only print the wrong parameters, if the first parameter is true, it will do nothing
console.assert(false, "Log me!")let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})console.count ( )
This function records the number of times count () is called. This function accepts an optional parameter label
If a label is provided, this function will record the number of times count() is called with that specific label
console.count("Hey")
console.count("Hey")
console.count("Hey")
console.count("Hey")If the label is omitted, the function will record the number of times count () is called in this line
for (let i = 0; i < 5; i++) {
console.count()
}time( ) and timeEnd( )
Check the performance of the code during execution, Time () is a better way to track the micro-time spent in JavaScript execution
console.time("Time")
let l = 0;
for (let i = 0; i < 5; i++) {
l += i
}
console.log("total", l)
console.timeEnd(
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。