1. Command to display information
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Common console command</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('hello');
console.info('information');
console.error('error');
console.warn('warning');
</script>
</body>
</html>
The most commonly used console.log is the console.log.
Two: Placeholder
The above concentration of console supports the printf placeholder format. The supported placeholders are: characters (%s), integers (%d or %i), floating point numbers (%f) and object (%o)
The code copy is as follows:
<script type="text/javascript">
console.log("%d year %d month %d day", 2011, 3, 26);
</script>
Effect:
3. Information grouping
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Common console command</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.group("first group of information");
console.log("First group first: my XX(//www.VeVB.COM)");
console.log("First group 2: xxx(http://VeVB.COM)");
console.groupEnd();
console.group("second group of information");
console.log("Second Group 1: Program enthusiast QQ group: 80535344");
console.log("Second Group 2: Welcome to join");
console.groupEnd();
</script>
</body>
</html>
Effect:
4. View the object's information
console.dir() can display all properties and methods of an object.
The code copy is as follows:
<script type="text/javascript">
var info = {
blog:"//www.VeVB.COM",
QQGroup:80535344,
message: "Program enthusiasts welcome you to join"
};
console.dir(info);
</script>
Effect:
5. Display the content of a node
console.dirxml() is used to display the html/xml code contained in a node of a web page.
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Common console command</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>My blog: www.ido321.com</h3>
<p>Program enthusiast: 259280570, welcome to join</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>
Effect:
6. Determine whether the variable is true
console.assert() is used to determine whether an expression or variable is true. If the result is No, a corresponding message is output on the console and an exception is thrown.
The code copy is as follows:
<script type="text/javascript">
var result = 1;
console.assert( result );
var year = 2014;
console.assert(year == 2018);
</script>
1 is a non-0 value, it is true; and the second judgment is false, and the error message is displayed on the console
7. Track the call track of the function.
console.trace() is used to track the call track of the function.
The code copy is as follows:
<script type="text/javascript">
/*How the function is called, just add the console.trace() method to it*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
Console output information:
8. Timing function
console.time() and console.timeEnd() are used to display the running time of the code.
The code copy is as follows:
<script type="text/javascript">
console.time("Console Timer One");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("Console Timer One");
</script>
Running time is 38.84ms
9. Performance analysis of console.profile()
Performance analysis (Profiler) is to analyze the running time of each part of the program and find out the bottleneck. The method used is console.profile().
The code copy is as follows:
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
function funcA(count){
for(var i=0;i<count;i++){}
}
function funcB(count){
for(var i=0;i<count;i++){}
}
console.profile('performance analyzer');
All();
console.profileEnd();
</script>
Let me explain that during the LZ test, no alert was added to All(), and the control bar was not output. After adding, there was a performance analysis table. The reason was not clear yet. If you know, you can comment.