Detailed explanation of javascript console_javascript skills

1. Commands to display information

console.log(); //Console input will not be output on the web page

console.info(); //General information

console.debug(); //Debug information

console.warn(); //Warning prompt

console.error(); //Error prompt

"console.log();" can be used to replace "alert();" or "document.write();" For example, write "console.log("Hello World");" in the web page and then It will be entered in the console, but not in the web page.

We insert the following code into the code:

console.info( "This is info" );

console.debug( "This is debug" );

console.warn( "This is a warning" );

console.error( "This is error" );

After loading, open the console and you will see something like the following:

2. Placeholder

The above five methods of the console object can all use printf style placeholders. However, there are relatively few types of placeholders, and only four types of placeholders are supported: characters (%s), integers (%d or %i), floating point numbers (%f), and objects (%o). For example:

console.log( "%d year %d month %d day" , 2011,3,26);

console.log( "Pi is %f" , 3.1415926 );

%o placeholder can be used to view the internal conditions of an object. For example, there is such an object:

var dog = {} ;

dog.name = "大毛";

dog.color = "yellow";

Then, use the o% placeholder for it:

console.log( "%o" , dog );

3. Group display

console.group(); console.groupEnd(); （这两个方法是成对使用的）
　　console.group("第一组信息");
　　　　console.log("第一组第一条");
　　　　console.log("第一组第二条");
　　console.groupEnd();
　　console.group("第二组信息");
　　　　console.log("第二组第一条");
　　　　console.log("第二组第二条");
　　console.groupEnd();

4. console.dir(); (displays all properties and methods of an object)

For example, now add a bark() method to the dog object in Section 2, and then use "dir();" to display it:

dog.bark = function(){ alert( "bark woof" ); };

console.dir( dog );

5. console.dirxml(); (get all html/xml codes contained in a node)

　var table = document.getElementById("table1"); //Get node

console.dirxml( table ); //Display all codes of the node

6. console.assert(); (used to determine whether an expression or variable is true. If the result is no, a corresponding message will be output on the console and an exception will be thrown)

　var result = 0;

console.assert( result ); //false

　var year = 2000;

console.assert( year == 2011 ); //false

7. console.trace(); (used to trace the function call trace)

/*An addition function*/

Function add( a,b ){

return a b;

　}

I want to know how this function is called, just add the console.trace() method to it:

Function add( a,b ){

console.trace();

return a b;

　}

Assume that the calling code of this function is as follows:

　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 ); }

After running, the call trace of add() will be displayed, from top to bottom, add(), add1(), add2(), add3()

8. console.time(); and console.timeEnd(); (used to display the running time of the code)

　　console.time( "计时器一" );

　　for( var i=0;i<1000;i++ ){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd( "计时器一" );

9. Performance Analysis

Performance analysis (Profiler) is to analyze the running time of each part of the program and find out where the bottleneck is. The method used is console.profile();

Suppose there is a function Foo(), which calls two other functions funcA() and funcB(), of which funcA() is called 10 times and funcB() is called once.

　　function Foo(){

　　　　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++){}

　　}

Then analyze the running performance of “Foo();”:

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

The title bar indicates that a total of 12 functions were run, taking a total of 2.656 milliseconds. Among them, funcA() runs 10 times, taking 1.391 milliseconds, the shortest running time is 0.123 milliseconds, the longest running time is 0.284 milliseconds, and the average is 0.139 milliseconds; funcB() runs once, taking 1.229ms.

In addition to using the "console.profile();" method, firebug also provides a "Profiler" button. When you click the button for the first time, "Performance Analysis" starts, and you can perform certain operations on the web page (such as ajax operations). Then when you click the button for the second time, "Performance Analysis" ends, and all operations triggered by this operation will be performed. Performance analysis.

10. Attribute menu

After the name of the console panel, there is an inverted triangle. When clicked, the properties menu will be displayed.

By default, the console only displays Javascript errors. If you select Send Javascript warnings, CSS errors, and XML errors, the relevant prompt information will be displayed.

What is more useful here is to display "XMLHttpRequests", which is to display ajax requests. After selecting, all ajax requests of the web page will be displayed in the console panel.

For example, if you click on a YUI example, the console will tell us that it issued a GET request using ajax. The header information and content body of the http request and response can also be seen.

The above is the entire content of this article, I hope you all like it.