Home > Developer > JavaScript
Details about the Console commands of the js debugging tool and the debugging tool commands
1. Command for displaying information
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> common console Commands </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</Head>
<Body>
<Script type = "text/javascript">
Console. log ('hello ');
Lele.info ('info ');
Console. error ('error ');
Console. warn ('Warning ');
</Script>
</Body>
</Html>
The most common one is console. log.
2. placeholders
The preceding concentration on the console supports the placeholder format of printf. Supported placeholders include: character (% s), INTEGER (% d or % I), floating point number (% f) and object (% o)
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Console. log ("% d", 2011,3, 26 );
</Script>
Effect:
3. Information grouping
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> common console Commands </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</Head>
<Body>
<Script type = "text/javascript">
Console. group ("group 1 information ");
Console. log ("First group: My XX (http://www.bkjia.com )");
Console. log ("first group second: xxx (http://jb51.net )");
Console. groupEnd ();
Console. group ("group 2 information ");
Console. log ("group 2 Article 1: QQ Group for programmers: 80535344 ");
Console. log ("second article in the second group: Welcome to join ");
Console. groupEnd ();
</Script>
</Body>
</Html>
Effect:
4. view object information
Console. dir () can display all attributes and methods of an object.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var info = {
Blog: "http://www.bkjia.com ",
QQGroup: 80535344,
Message: "You are welcomed by programmers"
};
Console. dir (info );
</Script>
Effect:
5. display the content of a node
Console. dirxml () is used to display the html/xml Code contained by a node on a webpage.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> common console Commands </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</Head>
<Body>
<Div id = "info">
<H3> my blog: www.ido321.com <P> programmers: 259280570. Welcome to join us </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 message is output on the console and an exception is thrown.
Copy codeThe Code 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, true, and the second is false. The error message is displayed on the console.
7. Track function call traces.
Console. trace () is used to track the call track of a function.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
/* How is a function called? 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 code running time.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Console. time ("console timer 1 ");
For (var I = 0; I <1000; I ++ ){
For (var j = 0; j <1000; j ++ ){}
}
Console. timeEnd ("console timer 1 ");
</Script>
Running time is 38.84 ms
9. Performance Analysis of console. profile ()
Performance analysis (Profiler) is used to analyze the running time of each part of the program and identify the bottleneck. The method used is console. profile ().
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function All (){
Alert (11 );
For (var I = 0; I <10; I ++ ){
FuncA (1, 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>
Note: During the LZ test, alert is not added to All (), and the control bar has no output. After the control bar is added, a performance analysis table is displayed. The reason is unknown for the moment. If you know, can be commented.
Firefox needs to download components: firebug. other browsers such as IE and Chrome already have this function.
Basically, all browser debugging tools call out by F12. If you cannot press it, it may be because your browser version is too low. update it. For example, IE is available only in IE7 or later versions.
Which Js debugging tool is better?
Firebug: almost everyone who writes html, css, and js Code is familiar with the tool, which is used in tangram development and debugging.
Closure linter (gjslint) code Check Tool
The js unit testing framework developed by the qunit jquery team is as simple and easy to use as jquery.
Rietveld Code Review Tool the code review Tool written by the father of python. It can be used to easily review code by multiple users.
Jsdoc-toolkit js version of javadoc, used to generate a document from the source code annotation.
Yui compressor js/css compression tool, used to compress js Code and reduce the bandwidth consumed by downloading.
The above options
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
