Console command in detail to make debugging JS code easier

Just read about the JS Blog when found that this method is very fun, I have a cool.

1 <script>2 console.time ('/x (. +) +x/test '); 3 "==xx=============================". Match (/x (. +) +x/); 4 Console.timeend ('/x (. +) +x/test  ' 

And then the knowledge of the Firebug console is a bit of a bad one. Skilled use of firebug can greatly improve work efficiency.

===============

Firebug Console Detailed

Nanyi
Source: http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

The console is the first panel of the Firebug and the most important panel, the main function is to display the page loading process to generate a variety of information.

I. Commands to display information

The Firebug contains a console object that provides 5 ways to display information.

The simplest method is Console.log (), which can be used to replace alert () or document.write (). For example, using Console.log ("Hello World") in a Web script, the console will automatically display the following when it loads.

　　

In addition, depending on the nature of the information, the console object also has 4 ways to display information, namely General Information Console.info (), Error console.debug (), Warning Console.warn (), Error message Console.error ().

For example, insert the following four lines in the Web script:

1 <script>2 console.info (' This is Info ');  3 Console.debug (' This is Debug ');  4 Console.warn (' This is warn ');  5 Console.error (' This is error ');  6 </script>        

When loaded, the console displays the following:

　　　

Can see, different nature of the information in front of the different icons, and each message has a hyperlink behind, click to jump to the corresponding line of the source page.

Second, placeholder

　　You can use the printf-style placeholder for the top 5 methods of the console object. However, there are fewer types of placeholders, only support for characters (%s), integers (%d or%i), floating-point numbers (%f), and Objects (%o) four.

Like what

<script>    console.log ('%d%d months ', 2014,06,30);    Console.log (' pi is%f ', 3.1415926);</script>

The%o placeholder, which you can use to view the inside of an object. For example, there is an object such as:

var dog = {};d og.name= ' da Mao ';d og.color= ' yellow ';

Then, use the o% placeholder for it.

Console.log ('%o ', dog);

Third, the group display if the information too much, can be grouped display, the method used is Console.group () and Console.groupend ().

1 Console.group ("First set of Information");2 3 Console.log ("first Group One");4 5 Console.log ("First group, second article");6 7 console.groupend ();8 9 Console.group ("Second set of Information");Ten  One Console.log ("second group first"); A  - Console.log ("second group, second section"); -  theConsole.groupend ();

　　

Iv. Console.dir ()

Console.dir () can display all properties and methods of an object.

For example, now for the second section of the Dog object, add a bark () method.

1 dog.bark = function () {alert ("Wang Woo");};

Then, the contents of the object are displayed,

1 console.dir (dog);

　　

Wu, Console.dirxml ()

Console.dirxml () is used to display the Html/xml code contained in a node of a Web page.

For example, get a table node first,

Window.onload = function () {  console.dirxml (document.getElementById ("table"));}

　　

Liu, Console.assert ()

Console.assert () is used to determine whether an expression or variable is true. If the result is no, a corresponding message is output in the console and an exception is thrown.

For example, the results of the following two judgments are no.

1 <Script>2   varresult= 0;3 Console.assert (result);4   var Year=  -;5 Console.assert ( year==  . );6 </Script>

　　

Vii. Console.trace ()

Console.trace () is used to track the call path of a function.

For example, there is an adder function.

function Add (A, b) {    return a+b;  }

I want to know how this function is called, and add the Console.trace () method to it.

function Add (A, b) {    console.trace ();    return a+b;  }

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

1 var x = add3 (n); 2 function add3 (A, b) {return  add2 (A, b);} 3 function Add2 (A, b) {return  add1 (A, b);} 4 function add1 (A, b) {return Add (a, b);} 　 　 　

After running, the call track of Add () is displayed, from top to bottom in order of Add (), Add1 (), ADD2 (), ADD3 ().

　　

Eight, chronograph function

Console.time () and Console.timeend () are used to display the elapsed time of the code.

1     Console.time ("Timer one"); 2  for (var i=0;i<1000;i++) {3for (var j=0;j<1000;j++) {} 4 }5 console.timeend ("Timer one"); 　　 　　　　

　　　

Nine, performance analysis

Performance analysis (Profiler) is the analysis of the various parts of the running time, to find out the bottleneck, the method used is Console.profile ().

Suppose there is a function foo (), which calls the other two functions Funca () and FUNCB (), where Funca () calls 10 times, FUNCB () calls 1 times.

1   functionFoo () {2    　  for(vari=0;i<10;i++) {Funca (1000);}3FUNCB (10000);4 }5  　 functionFunca (count) {6  　　  for(vari=0;i<count;i++){}7 }8  　 functionFUNCB (count) {9  　　  for(vari=0;i<count;i++){}Ten}

You can then analyze the running performance of Foo ().

Console.profile (' Performance Analyzer ');  Foo ();  Alert ('; ') ); Console.profileend ();

　The console displays a performance analysis table, such as.

　

In addition to using the Console.profile () method, Firebug also provides an "overview" (Profiler) button. The first time you click on the button, "profiling" starts, you can do something about the Web page (such as an AJAX operation), and then click the button for the second time, "profiling" ends, and all the operations that are caused by the operation are analyzed for performance.

　　

Ten, the Properties menu

After the console panel name, there is an inverted triangle, which displays the Properties menu when clicked.

　　

By default, the console displays only JavaScript errors. If you select JavaScript warnings, CSS errors, and XML errors to be sent on, the relevant prompts are displayed.

What's more useful here is "show xmlhttprequests", which is the AJAX request. When selected, all AJAX requests for the Web page are displayed in the console panel.

For example, the console tells us that it sends out a GET request in Ajax, as well as the header information and the content body of the HTTP request and response.