Javascript Debugging Tool Firebug use detailed

Javascript Debugging Tool Firebug Use details sometimes, in order to see the output information more clearly and conveniently, we may need to group some debugging information into the output, You can then use Console.group to group the information and end the grouping with Console.groupend after the group information output is complete.

Let's test the 4 output as a packet output and modify the code to:

Copy CodeThe 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 to see the results (Figure 11-5). In Console.group, we can also add a group header "start group:". If necessary, we can also group within the group in nested ways.

Figure 11-5
Sometimes we need to write a for loop to list all the properties of an object or all the nodes under an HTML element, and with Firebug, we don't need to write this for loop anymore, we just need to use Console.dir (object) or console.dirxml (Element) is available.
Add the code test to the test page:

Copy CodeThe code is as follows:
Console.dir (document.getElementById (' Div1 '));
Console.dirxml (document.getElementById (' Div1 '));

See figure 11-6 and figure 11-7 for results.

Figure 11-6

Figure 11-7
Do you want to know how fast your code is running? Very simple, use Console.time and console.timeend.
Modify the code of the test function to test how long it will take to run 1000 loops:

Copy CodeThe code is as follows:
function Test () {
Console.time (' Test ');
for (Var i=0;i<1000;i++) {
document.getElementById (' Div2 '). innerhtml=i;
Console.log (' Current parameters are:%d ', i);
}
Console.timeend (' Test ');
}

Refresh the page and click "Square Two" to see the results (Figure 11-8). It is important to note that the parameters in Console.time and console.timeend are consistent in order to have the correct output, which is the title of the information.

Figure 11-8
Do you want to know where a function is called from? Console.. Trace can help us track it. At the end of the test function, add:
Console.trace ();
Refresh the page and click "Square Two" to see the results (Figure 11-9). The result is a mouse click event in coordinates (97,187) that executes the test function, and the script that is called is the 1th line in the simple.html file. Because the event in HTML is called the test function, the line number shown is line 1th. If it is a script, it displays the line number of the calling script, which you can click to go directly to the calling line.

Figure 11-9
If you want to set a breakpoint at a location in the script, you can enter "debugger" as a line in the script. When the script executes to this line, it stops waiting for user action, which can be debugged by switching to the "Script" tab.
Firebug There are other debugging functions, which are not introduced here, interested in testing themselves. Table 4 is a list of all functions:

Function	Description
Console.log (object[, Object, ...])	Output a message to the console. You can enter multiple parameters, and the output will have spaces separating the output of each parameter. The first parameter can contain formatted text, for example: Console.log (' There are%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 that contains a hyperlink link to the output location.
Console.info (object[, Object, ...])	Outputs a message with an information icon and background color to the console that contains a hyperlink link to the output location.
Console.warn (object[, Object, ...])	Output a message with a warning icon and background color to the console that contains a hyperlink link to the output location.
Console.error (object[, Object, ...])	Output a message with an error icon and background color to the console that contains a hyperlink link to the output location.
Console.assert (expression[, Object, ...])	Tests whether a representation is true, and if False, submits an exception to the console.
Console.dir (object)	Lists all the properties of an object.
Console.dirxml (node)	Lists the XML source tree for HTML or XML element.
Console.trace ()	The call entry for the output stack.
Console.group (object[, Object, ...])	The information is grouped and then output to the console. End the grouping by Console.groupend ().
Console.groupend ()	Ends the grouping output.
Console.time (name)	Create a timer called name, calculate the execution time of the code, 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 a performance test of the script, title is the test header.
Console.profileend ()	End the performance test.
Console.count ([title])	Calculates the number of times the code was executed. Titile as the output caption.
Table 4

12. Using Firebug in IE
Firebug is an extension of Firefox, but I am used to debugging my page in IE what to do? If you add Console.log () to the page script to write debug information to Friebug, in IE must be the wrong hint, how to do? Don't worry, Frirebug provides a frirbug lite script that can be inserted into the page to mimic the Firebug console.
We can download Firebug lite from the address:
Http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
Then add it to the page:
<script language= "javascript" type= "Text/javascript" src= "/Path/firebug.js" ></script>
If you do not want to imitate the Friebug console in IE, just do not want the Console.log () script to have an error message, then add a statement to the page:
<script language= "javascript" type= "Text/javascript" src= "/Path/firebugx.js" ></script>
If you do not want to install Firebug Lite, just to avoid scripting errors, you can add the following statement to the script:
if (!window.console | |!console.firebug)
{
var names = ["Log", "Debug", "Info", "Warn", "error", "Assert", "dir", "Dirxml",
"Group", "GroupEnd", "Time", "Timeend", "Count", "Trace", "Profile", "profileend"];
Window.console = {};
for (var i = 0; i < names.length; ++i)
Window.console[names[i]] = function () {}
}
We'll add firebug.js to the test page, then open IE and load the page. Once the page is loaded, we can open the console by pressing the F12 key. After each page refresh, you have to press F12 key to open the console, is not very annoying? If you don't want to, add "debug= ' true" to the HTML tag, for example:
There are also command lines in Friebug Lite, but the functionality is not that strong.

Javascript Debugging Tool Firebug use detailed