Firebug series (2)

The Console is the first and most important panel of Firebug. It is mainly used to display various types of information generated during webpage loading. 1. the Firebug command for displaying information has a built-in console object, which provides five methods for displaying information. The simplest method is console. log (), which can be used to replace alert () or document. writ

The Console is the first and most important panel of Firebug. It is mainly used to display various types of information generated during webpage loading. 1. the Firebug command for displaying information has a built-in console object, which provides five methods for displaying information. The simplest method is console. log (), which can be used to replace alert () or document. writ

The Console is the first and most important panel of Firebug. It is mainly used to display various types of information generated during webpage loading.

1. Command for displaying information

Firebug has a built-in console object, which provides five methods for displaying information.

The simplest method is console. log (), which can be used to replace alert () or document. write (). For example, if you use console. log ("Hello World") in a web script, the console automatically displays the following content during loading.

In addition, according to the different nature of information, there are four methods for displaying information in the console object, namely the general information lele.info () and the debugging information console. debug (), warning console. warn (), error prompt console. error ().

For example, insert the following four lines in a web script:

Console.info ("this is info ");

Console. debug ("this is debug ");

Console. warn ("this is warn ");

Console. error ("this is error ");

When loading, the console displays the following content.

You can see that there are different icons in front of different types of information, and each piece of information is followed by a hyperlink. Click it and jump to the corresponding line of the web page source code.

2. placeholders

Any of the above five methods of the console object can use a printf-style placeholder. However, there are few placeholders. Only characters (% s), integers (% d or % I), floating point numbers (% f), and objects (% o) are supported.

For example,

Console. log ("% d", 2011,3, 26 );

Console. log ("the circumference rate is % f", 3.1415926 );

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

Var dog = {};

Dog. name = "Mao ";

Dog. color = "yellow ";

Then, use the o % placeholder for it.

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

3. group display

If there is too much information, it can be displayed in groups. The methods used are console. group () and console. groupEnd ().

Console. group ("group 1 information ");

Console. log ("first group 1 ");

Console. log ("the first group and the second group ");

Console. groupEnd ();

Console. group ("group 2 information ");

Console. log ("second group first ");

Console. log ("second entry in the second group ");

Console. groupEnd ();

Click the group title. The group information is folded or expanded.

Iv. console. dir ()

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

For example, add a bark () method for the dog object in section 2.

Dog. bark = function () {alert ("Wang Wangwang ");};

Then, the content of the object is displayed,

Console. dir (dog );

V. console. dirxml ()

Console. dirxml () is used to display the html/xml Code contained by a node on a webpage.

For example, first obtain a table node,

Var table = document. getElementById ("table1 ");

The Code contained in the node is displayed.

Console. dirxml (table );

6. console. assert ()

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.

For example, the following two results are no.

Var result = 0;

Console. assert (result );

Var year = 2000;

Console. assert (year = 2011 );

7. console. trace ()

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

For example, there is a multiplier 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 call 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 track of add () is displayed, from top to bottom: add (), add1 (), add2 (), and add3 ().

8. Timing Function

Console. time () and console. timeEnd () are used to display the code running time.

Console. time ("timer 1 ");

For (var I = 0; I <1000; I ++ ){

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

}

Console. timeEnd ("timer 1 ");

IX. Performance Analysis

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 ().

Assume that there is a function Foo (), which calls the other two functions funcA () and funcB (), where funcA () calls 10 times and funcB () calls once.

Function Foo (){

For (var I = 0; I <10; I ++) {funcA (1000 );}

FuncB (10000 );

}

Function funcA (count ){

For (var I = 0; I

}

Function funcB (count ){

For (var I = 0; I

}

Then, you can analyze the Running Performance of Foo.

Console. profile ('performance analyzer 1 ');

Foo ();

Console. profileEnd ();

The console displays a performance analysis table, as shown in.

The title bar prompts that a total of 12 functions were run, which took 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 running time is 0.139 milliseconds; funcB () runs 1 time, taking Ms milliseconds.

In addition to the console. profile () method, firebug also provides a "profile" button. Click this button for the first time to start with "Performance Analysis". You can perform some operations (such as ajax operations) on the webpage, and then click this button for the second time to end with "Performance Analysis, all operations caused by this operation perform performance analysis.

10. Attribute menu

There is an inverted triangle behind the name of the console panel. After you click it, the attribute menu is displayed.

By default, the console only displays Javascript errors. If Javascript warnings, CSS errors, and XML errors are selected, the related prompts are displayed.

What is useful here is "display XMLHttpRequests", that is, display ajax requests. After selection, all ajax requests on the webpage will be displayed on the console panel.

For example, if you click a YUI example, the console will tell us that it uses ajax to send a GET request, http request and response header information and content body.

[References]

* Firebug Tutorial-Logging, Profiling and CommandLine (Part I)

* Firebug Tutorial-Logging, Profiling and CommandLine (Part II)