Summary of using the console tab in Firebug

Firebug has a total of six tabs: Console, HTML, CSS, Script, DOM, and NET. Today we will focus on the usage of the Console.

In fact, we should be very familiar with the Console, because here is the window for Firebug to provide various information, and this is the main purpose of the Console, Logging ).

In addition, the Console also provides a command line method to debug Javascript. The following describes how to use the Console.

1. Logging in Firefox ).

Through the record method on the Console, we can no longer use the annoying alert or document. write methods for debugging. Firebug provides five types of logs:

◆ Console. log: record a line of information without any icons;

◆ Console. debug: record a line of information with a hyperlink, which can be linked to the place where the statement is called;

◆ Console. error (): write error information to the console, with the error icon display and highlighted code link;

◆ Console.info (): Write the prompt information to the console, with the information icon display and highlighted code link;

◆ Console. warn (): Write warning information to the console, with a warning icon display and highlighted code link;

Consystemic print strings support string replacement, which is like printf ("% s", a) in c. Supported types include:

% S string, string

% D, % I integer

% F floating point

% O object

If % o is used, the object will be displayed with a green hyperlink, and you will be taken to the DOM view after you click it.
2. Group ).

If a certain type of information is too large, grouping is conducive to logical division. It is easy to use. See the code.

function consoleGroup(){              var groupname = "Group 1";              console.group("Message group %s", groupname);              console.log("This is the 1 message in %s", groupname);              console.log("This is the 2 message in %s", groupname);              console.log("This is the 3 message in %s", groupname);              console.groupEnd();                            goupname = "Group 2";              console.group("Message group %s", goupname);              console.log("This is the 1 message in %s", goupname);                            var subgroupname = "Sub group 1";              console.group("Message group %s",subgroupname);              console.log("This is the 1 message in %s", subgroupname);              console.log("This is the 2 message in %s", subgroupname);              console.log("This is the 3 message in %s", subgroupname);              console.groupEnd();                            console.log("This is the 2 message in %s", goupname);              console.groupEnd();          }

3. console. dir and console. dirxml

Console. dir can print out all the methods and attributes of an object. This method is undoubtedly very useful and we no longer need objects. the toString method is supported. It is easy to view objects as long as there is a firebug.

At the same time, we can print the elements in the page as an object, but be careful, because this will output a lot of information, you may be lost in complicated information and cannot find the entries you need.

We can put a large amount of information into a group by grouping, which makes it clearer logically.

Function consoleDir (){ Function Car (){ This. Model = "Old Model "; This. getManu = function (){ Return "Toyota "; } } Var objCar = new Car (); Console. dir (objCar ); Console. dir (zoo ); Var groupname = "Css Style "; Console. group ("The button Style", groupname ); Console. dir (document. getElementById ('leledir'). style, groupname ); Console. groupEnd (); } Console. dirxml prints the XML Representation of HTML elements.

4. assert (console. assert ()).

Console. assert () can be used to determine whether an expression is correct. If an error occurs, the error message is printed in the console window.

5. trace (console. trace ()).

Console. trace () is a very interesting feature. Let's take a look at the official explanation: printing the stack trace of the Javascript execution time.

This function can print the path information from the start point to the end point during program execution. For example, if we want to know when a function is executed and how it is executed, we put console. trace () in this function and we can see the path of the function to be executed. This function is useful when debugging the source code of others.

6. Timing ).

Console. time (timeName) can be used for timing. This is especially useful when we need to know the code execution efficiency, so we don't have to build our own wheels.

function consoleTime(){              var timeName = "timer1";              console.time(timeName);              var a = 0;                              for(var i = 0; i < 100; i++){                  for(var j = 0; j < 100; j++){ //                        console.log('Hello world');                      a = a + 1;                  }              }                            console.log("a = %d", a);              console.timeEnd(timeName);          }

7. Javascript analyzer (Javascript Profiler ).

You can analyze Javascript code execution by using the code console. profile ('filename ') or clicking the Profiler tag. This function is similar to console. time (), which can help us evaluate code performance, but provide more detailed information than console. time.

There are three methods to call Javascript profiler. One is to write an analysis script in the Code, the other is to click the profile tag, and finally you can enter a command in the command line to execute. After the execution, you can see the detailed output results. The following describes the items:

Function Column: displays the name of the called Function;

Call Column: displays the number of calls;

Percent Column: displays the time consumption ratio;

Own Time: display the Time when the internal statement of the function is executed, excluding the Time when other functions are called;

Time Column: displays the execution Time of the function from start to end;

Avg Column: Average time. Avg = Own/Call;

Min & Max Column: displays the minimum and maximum time;

File Column: The File where the function is located;

8. Other options.

There is an Options option on the far right of the Console Tab. You can define the expected errors here. The content is easy to understand and I will not talk about it here. One thing is that after Firebug1.3, Show Chrome Errors and Show Chrome Message are added.
.

And so on, these options have not verified their specific role, which knows can share it.

1. How to execute global code in JavaScript Functions
2. JavaScript Integrated Testing Tool Test Swarm released
3. Conquer RIA: JavaScript-based Web Client development