How to Use Firebug, a powerful Javascript debugging tool

Sometimes, in order to view output information more clearly and easily, we may need to group some debugging information for output. You can use the console. group to group information. After the group information is output, use console. groupEnd ends the group. Let's test the preceding four outputs as a group output and modify the code:

The Code is as follows:

Console. group ('start group :');
Console. debug ('this is console. debug! ');
Console.info ('this is console.info! ');
Console. warn ('this is console. warn! ');
Console. error ('this is console. error! ');
Console. groupEnd ();

Refresh the page and check the result (1-5 ). In console. group, we can also add a group title "start group :". If necessary, we can also group in groups through nesting.

1-5
Sometimes, we need to write a for loop to list all the attributes of an object or all the nodes under an HTML Element. With firebug, we don't need to write this for loop anymore, we only need to use the console. dir (object) or console. dirxml (element.
Add the code to the test page to test:

The Code is as follows:

Console. dir (document. getElementById ('p1 '));
Console. dirxml (document. getElementById ('p1 '));

For the results, see 1-6 and 1-7.

1-6

1-7
Do you want to know the code running speed? You can simply use console. time and console. timeEnd.
Modify the code of the test function and test how long it takes to run the 1000 cycle:

The Code is as follows:

Function test (){
Console. time ('test ');
For (var I = 0; I <1000; I ++ ){
Document. getElementById ('p2 '). innerHTML = I;
// Console. log ('the current parameter is % d', I );
}
Console. timeEnd ('test ');
}

Refresh the page and click "square 2" to see the result (1-8 ). Note that the parameters in console. time and console. timeEnd must be consistent to produce correct output, and this parameter is the title of the information.

1-8
Do you want to know where a function is called? Console .. trace can help us track. Add the following at the end of the test function:
Console. trace ();
Refresh the page and click "square 2" to see the result (1-9 ). The result shows that testbench is executed on the mouse single event (1st,), and the script is rows in the simple.html file. Because the event in HTML calls the test function, the row number displayed is 1st. If it is a script, the row number of the script to be called is displayed. You can click it to directly go to the call line.

1-9
If you want to set a breakpoint somewhere in the script, you can enter "debugger" as a line in the script. When the Script runs on this line, it stops waiting for the user to perform the operation. In this case, you can switch to the "Script" label to debug the Script.
Firebug has other debugging functions. I will not introduce them here. If you are interested, you can test them yourself. Table 4 lists all functions:

Function	Description
Console. log (object [, object,...])	Output A message to the console. You can enter multiple parameters, and the output will be separated by spaces. The first parameter can contain formatted text, for example: Console. log ('here % d % s', count, apple ); String format: % S: string. % D, % I: Number. % F: floating point number. % O-hyperlink object.
Console. debug (object [, object,...])	Output A message to the console, which contains a hyperlink link to the output location.
Console.info (object [, object,...])	Output a message with an information icon and background color to the console. The information contains a hyperlink to the output position.
Console. warn (object [, object,...])	Output a message with a warning icon and background color to the console, which contains a hyperlink to the output location.
Console. error (object [, object,...])	Output a message with an error icon and background color to the console, which contains a hyperlink to the output location.
Console. assert (expression [, object,...])	Test whether the value is true. If the value is false, submit an exception to the console.
Console. dir (object)	Lists all attributes of an object.
Console. dirxml (node)	Lists the XML source trees of HTML or XML elements.
Console. trace ()	The call entry of the output stack.
Console. group (object [, object,...])	Output The Information Group to the console. End the Group through console. groupEnd.
Console. groupEnd ()	End Group output.
Console. time (name)	Create a timer named name, calculate the code execution time, call console. timeEnd (name) to stop the timer, and output the execution time.
Console. timeEnd (name)	Stop the timer named name and output the execution time.
Console. profile ([title])	Start to test the performance of the script. The title is the test title.
Console. profileEnd ()	End the performance test.
Console. count ([title])	Calculates the number of times the code is executed. Titile is used as the output title.
Table 4

12. Use Firebug in IE
Firebug is an extension of Firefox, but I am used to debugging my page in IE. What should I do? If you add console. log () to the page script to write the debugging information to Friebug, an error is prompted in IE. What should I do? Don't worry. Frirebug provides the Frirbug Lite script, which can be inserted into the page to imitate the Firebug console.
We can download firebug lite from the following URL:
Http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
Then add the following content to the page: