<div id= "Art_info" >
Author: font: [<a href= "Javascript:turnbig ()" > Add </a> <a href= "Javascript:turnsmall ()" > Reduce </a>] Type: Reprint
</div><!--End Art_info-->
<div class=blank3></div>
<div id= "Art_demo" > Sometimes, in order to more clearly and conveniently view the output information, we may need some debugging information to be grouped 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. </div>
<div class=blank3></div>
<div id= "Con_all" >
<script type= "Text/javascript" >dy ("Bcall");</script>
</div>
<div id= "Art_content" >
<!--newszw_hzh_begin-->
<P> Let's test the 4 output as a grouped output, modify the code as: <br><div class= "Codetitle" ><span><a style= "CURSOR: Pointer "Data=" 25045 "class=" copybut "id=" copybut25045 "onclick=" docopy (' code25045 ') "><U> copy code </U> </a></span> code as follows: </div><div class= "Codebody" id= "code25045" ><br>console.group (' Start grouping: '); <br>console.debug (' is console.debug! '); <br>console.info (' is console.info! '); <br>console.warn (' is console.warn! '); <br>console.error (' is console.error! '); <br>console.groupend (); <BR></div><BR> 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. <br><br> map 11-5 <BR> 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. <BR> Add code test to test page: <br><div class= "Codetitle" ><spaN><a style= "Cursor:pointer" Data= "16759" class= "copybut" id= "copybut16759" onclick= "docopy" (' code16759 ') "> <U> Copy Code </U></a></span> code as follows: </div><div class= "Codebody" id= "code16759" ><br >console.dir (document.getElementById (' Div1 ')); <br>console.dirxml (document.getElementById (' Div1 ')); <BR></div><BR> results Please see figure 11-6 and Figure 11-7. <br> <br> figure 11-6 <br><br> map 11-7 <BR> Do you want to know how fast your code is running? It's easy to use Console.time and console.timeend. <BR> Modify the code of the test function to test how long it takes to run 1000 cycles: <br><div class= "Codetitle" ><span><a style= " Cursor:pointer "Data=" 94733 "class=" copybut "id=" copybut94733 "onclick=" docopy (' code94733 ') "><U> copy code </ U></a></span> code is as follows: </div><div class= "Codebody" id= "code94733" ><br>function tesT () {<br>console.time (' test '); <br>for (var i=0;i<1000;i++) {<br>document.getelementbyid (' Div2 '). innerhtml=i; <br>//console.log (' current parameter is:%d ', i); <BR>} <br>console.timeend (' Test '); <BR>} <BR></div><BR> Refresh the page, 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. <br><br> map 11-8 <BR> Whether you want to know where a function is invoked. Console.. Trace can help us with tracing. At the end of the test function, add: <br>console.trace (); <BR> 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. <br><br> map 11-9 <BR> 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. <br>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: <BR>
<table cellspacing=0 cellpadding=0 border=1>
<TBODY>
<TR>
<TD Valign=top width=235>
<P> function <BR></P></TD>
<TD valign=top width=333> Description </TD></TR>
<TR>
<TD valign=top Width=235>console.log (object[, Object, ...)) </TD>
<TD Valign=top width=333>
<P> output a message to the console. You can enter multiple parameters, and the output will be separated by a space separating the parameters output. </P>
<P> The first parameter can contain formatted text, such as:</p>
<p>console.log (' There are%d%s ', count,apple);</p>
<P> string Format:</p>
<p>%s: String. </P>
<p>%d,%i: number. </P>
<p>%f: Floating point numbers. </P>
<p>%o-Hyperlink object. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.debug (object[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> output a message to the console that contains a link to the output location. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.info (object[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> output a message with an information icon and background color to the console that contains a hyperlink to the output location. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.warn (object[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> output a message with a warning icon and background color to the console that contains a link to the output location. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.error (object[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> output a message with an error icon and background color to the console that contains a hyperlink to the output location. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.assert (expression[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> test whether a representation is true, or false, to submit an exception to the console. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.dir (object) </P></TD>
<TD Valign=top width=333>
<P> lists all the properties of the object. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.dirxml (node) </P></TD>
<TD Valign=top width=333>
<P> lists the XML source tree for HTML or XML element. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.trace () </P></TD>
<TD Valign=top width=333>
The call entry for the <P> output stack. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.group (object[, Object, ...]) </P></TD>
<TD Valign=top width=333>
<P> group the information and then output it to the console. Ends the grouping by Console.groupend (). </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.groupend () </P></TD>
<TD Valign=top width=333>
<P> End grouping output. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.time (name) </P></TD>
<TD Valign=top width=333>
<P> 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. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.timeend (name) </P></TD>
<TD Valign=top width=333>
<P> stops the timer named name and outputs the execution time. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.profile ([title]) </P></TD>
<TD Valign=top width=333>
<P> starts the performance test of the script, title is the test title. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.profileend () </P></TD>
<TD Valign=top width=333>
<P> End Performance tests. </P></TD></TR>
<TR>
<TD Valign=top width=235>
<p>console.count ([title]) </P></TD>
<TD Valign=top width=333>
<P> calculates the number of times the code was executed. Titile as the output header. </P></TD></TR>
<TR>
<TD valign=top width=568 colspan=2>
<p align=center> Table 4</p></td></tr></tbody></table><br><strong>12, Using firebug</strong> <br>firebug in IE is an extension of Firefox, but I am accustomed to debugging my page in IE. 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. <BR> we can download Firebug lite from the address: <br>http://www.getfirebug.com/releases/firebuglite1.0-b1.zip <BR> Then add in the page: <br><script language= "JavaScript" type= "Text/javascript" src= "/Path/firebug.js" >& Lt;/script> <BR> If you do not want to imitate the Friebug console in IE, just do not want the Console.log () script error message, then add the statement in the page: <br><script language= " JavaScript "type=" Text/javascript "src="/Path/firebugx.js "></script> <BR> If you do not want to install Firebug Lite, just to avoid scripting errors, you can add the following statement to the script: <br>if (!window.console | |!console.firebug) <BR >{<br>var names = ["Log", "Debug", "Info", "Warn", "error", "Assert", "dir", "Dirxml", <BR> "group", "group" End ', ' time ', ' timeend ', 'Count "," Trace "," Profile "," profileend "]; <br>window.console = {}; <br>for (var i = 0; I < names.length; ++i) <br>window.console[names[i]] = function () {} <br> ;br> 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. Every time the page refreshes, you have to press the 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: <br><html debug= "true" > <BR> also has command lines in Friebug Lite, but not so powerful. </P>
<!--newszw_hzh_end-->
