Let's test the 4 output as a grouped output, and modify the code to read:
Copy Code code as follows:
Console.group (' Start grouping: ');
Console.debug (' is console.debug! ');
Console.info (' is console.info! ');
Console.warn (' is console.warn! ');
Console.error (' is console.error! ');
Console.groupend ();
Refresh the page to see the results (Figure 11-5). In Console.group, we can also add a group heading "Start Grouping:". If necessary, we can also group them in a nested way.
Figure 11-5
Sometimes we need to write a for loop that lists all the attributes 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 OK.
Add the code test to the test page:
Copy Code code as follows:
Console.dir (document.getElementById (' Div1 '));
Console.dirxml (document.getElementById (' Div1 '));
See figure 11-6 and figure 11-7 for the results.
Figure 11-6
Figure 11-7
Do you want to know how fast your code is running? It's easy to use Console.time and console.timeend.
Modify the code of the test function to see how long it takes to run a 1000-time cycle:
Copy Code code as follows:
function Test () {
Console.time (' Test ');
for (Var i=0;i<1000;i++) {
document.getElementById (' Div2 '). innerhtml=i;
Console.log (' current parameter is:%d ', i);
}
Console.timeend (' Test ');
}
Refresh the page and click "Square Two" to see the results (Figure 11-8). Notice here that the parameters in Console.time and console.timeend are consistent to have the correct output, which is the title of the information.
Figure 11-8
Do you want to know where a function is invoked? Console.. Trace can help us with tracing. 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 shows that the test function was executed at the mouse click event in coordinates (97,187), and the script called is Line 1th in the simple.html file. Because the event in the HTML called the test function, the line number displayed is line 1th. If it is a script, the line number of the calling script is displayed, and you can go directly to the calling line by clicking it.
Figure 11-9
If you want to set a breakpoint somewhere in the script, you can enter "debugger" as a row in the script. When the script executes to this line, the wait user action stops executing, and the script can be debugged by switching to the "Script" tab.
Firebug also has some other debugging functions, which are not introduced here, and are 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 be separated by a space separating the parameters output. 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 numbers. %o-Hyperlink object. |
Console.debug (object[, Object, ...]) |
Output a message to the console that contains a hyperlink linked to the output location. |
Console.info (object[, Object, ...]) |
Output a message with an information icon and background color to the console that contains a hyperlink linked 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 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 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 the object. |
Console.dirxml (node) |
An XML source tree that lists HTML or XML element. |
Console.trace () |
The call entry for the output stack. |
Console.group (object[, Object, ...]) |
The information is grouped and then exported to the console. Ends the grouping by Console.groupend (). |
Console.groupend () |
Ends the grouping output. |
Console.time (name) |
Create a timer named name, calculate the execution time of the code, call Console.timeend (name) to stop the timer, and output the execution time. |
Console.timeend (name) |
Stops the timer named name and outputs the execution time. |
Console.profile ([title]) |
Start the performance test of the script, title is the test title. |
Console.profileend () |
End the performance test. |
Console.count ([title]) |
Count the number of times the code was executed. Titile as the output header. |
Table 4 |
12. Using Firebug in IE
Firebug is an extension of Firefox, but I am accustomed to debugging my page in IE how to do? If you add Console.log () to the page script to write debug information to Friebug, in IE must be prompted wrong, how to do? Don't worry, Frirebug provides a frirbug lite script that can be inserted into a 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 in the page:
<script language= "javascript" type= "Text/javascript" src= "/Path/firebug.js" ></script>
If you don't want to mimic the friebug console in IE, just don't want the Console.log () script to have an error message, add the statement to the page:
<script language= "javascript" type= "Text/javascript" src= "/Path/firebugx.js" ></script>
If you don't want to install Firebug Lite, just to avoid scripting errors, you can add the following statement to your 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 will add firebug.js to the test page and then open IE to 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 the F12 key to open the console, is it annoying? If you don't want to, add "debug= ' true" to the HTML tag, for example:
There are also command lines in the Friebug lite, but not so powerful.
