1. Command to display information
The code 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 is as follows:
<script type="text/javascript">console.log("%d year %d month %d day", 2016, 8, 20);</script>Effect:
3. Information grouping
The code 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 information"); console.log("First group item 1: My technical blog(https://segmentfault.com/u/learnme)"); console.log("First group item 2: My gitHub(https://github.com/specialCoder/)"); console.groupEnd(); console.group("Second group information"); console.log("Second group first: program enthusiast"); console.log("Second group second: 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 is as follows:
<script type="text/javascript">var info = {blog:"https://segmentfault.com/u/learnme/",gitHub:"https://github.com/specialCoder/",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 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: https://segmentfault.com/u/learnme/<p>Program enthusiasts, you are 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.
Assert is a good feature to ensure program correctness. In browsers with debugging tools, this feature can be implemented by calling console.assert().
The code is as follows:
<script type="text/javascript"> var result = 1; console.assert( result ); var year = 2014; console.assert(year===2018,"Assertion failed");</script>
In the console.assert() statement, the first parameter is the result of assert that needs to be performed, which should be true under normal circumstances; the second parameter is the error message printed on the console when an error occurs.
1 is a non-0 value, it is true; and the second judgment is false, and the error message is displayed on the console
Show results:
7. Track the call track of the function
console.trace() is used to track the call track of the function.
The code is as follows:
<script type="text/javascript">/*How the function is called, just add 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 is as follows:
<script type="text/javascript"> console.time("Count 1000*1000"); for(var i=0;i<1000;i++){ for(var j=0;j<1000;j++){} } console.timeEnd("Count 1000*1000");</script>Running time is 10.64ms
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 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.