Javascript 調試利器 Firebug使用詳解六__Java

<h1>Javascript 調試利器 Firebug使用詳解六</h1>
<div id="art_info">
作者：  字型：[<a href="javascript:turnbig()">增加</a> <a href="javascript:turnsmall()">減小</a>] 類型：轉載
</div><!--end art_info-->
<div class=blank3></div>
<div id="art_demo">有時候，為了更清楚方便的查看輸出資訊，我們可能需要將一些調試資訊進行分組輸出，那麼可以使用console.group來對資訊進行分組，在組資訊輸出完成後用console.groupEnd結束分組。</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>我們測試一下把剛才的4個輸出作為一個分組輸出，修改代碼為： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="25045" class="copybut" id="copybut25045" onclick="doCopy('code25045')"><U>複製代碼</U></a></span> 代碼如下:</div><div class="codebody" id="code25045"><BR>console.group('開始分組：'); <BR>console.debug('This is console.debug!'); <BR>console.info('This is console.info!'); <BR>console.warn('This is console.warn!'); <BR>console.error('This is console.error!'); <BR>console.groupEnd(); <BR></div><BR>重新整理頁面看看結果（圖11-5）。在console.group中，我們還可以加入一個組標題“開始分組：”。如果需要，我們還可以通過嵌套的方式，在組內再分組。 <BR><IMG src=" http://files.jb51.net/upload/20090705005127793.gif" border=0><BR>圖11-5 <BR>有時候，我們需要寫一個for迴圈列出一個對象的所有屬性或者某個HTML Element下的所有節點，有了firebug後，我們不需要再寫這個for迴圈了，我們只需要使用console.dir(object)或console.dirxml(element)就可以了。 <BR>在測試頁中加入代碼測試一下： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="16759" class="copybut" id="copybut16759" onclick="doCopy('code16759')"><U>複製代碼</U></a></span> 代碼如下:</div><div class="codebody" id="code16759"><BR>console.dir(document.getElementById('div1')); <BR>console.dirxml(document.getElementById('div1')); <BR></div><BR>結果請看圖11-6和圖11-7。<BR><IMG src=" http://files.jb51.net/upload/20090705005232601.gif" border=0>&nbsp;<BR>圖11-6 <BR><IMG src=" http://files.jb51.net/upload/20090705005250216.gif" border=0><BR>圖11-7 <BR>是否想知道代碼的運行速度。很簡單，使用console.time和console.timeEnd就可以。 <BR>修改一下test函數的代碼，測試一下運行1000次迴圈需要多少時間： <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="94733" class="copybut" id="copybut94733" onclick="doCopy('code94733')"><U>複製代碼</U></a></span> 代碼如下:</div><div class="codebody" id="code94733"><BR>function test(){ <BR>console.time('test'); <BR>for(var i=0;i&lt;1000;i++){ <BR>document.getElementById('div2').innerHTML=i; <BR>//console.log('當前的參數是：%d',i); <BR>} <BR>console.timeEnd('test'); <BR>} <BR></div><BR>重新整理頁面，單擊“方塊二”，看看結果（圖11-8）。在這裡要注意的是console.time和console.timeEnd裡的參數要一致才會有正確的輸出，而該參數就是資訊的標題。 <BR><IMG src=" http://files.jb51.net/upload/20090705005341236.gif" border=0><BR>圖11-8 <BR>是否想知道某個函數是從哪裡調用的。console..trace可協助我們進行追蹤。在test函數的結尾加入： <BR>console.trace(); <BR>重新整理頁面，單擊“方塊二”，看看結果（圖11-9）。結果顯示是在座標（97，187）的按一下滑鼠事件執行了test函數，而調用的指令碼是在simple.html檔案裡的第1行。因為是在HTML裡面的事件調用了test函數，所以顯示的行號是第1行。如果是指令碼，則會顯示呼叫指令碼的行號，通過單擊可以直接去到調用行。<BR><IMG src=" http://files.jb51.net/upload/20090705005411758.gif" border=0><BR>圖11-9 <BR>如果想在指令碼某個位置設定斷點，可以在指令碼中輸入“debugger”作為一行。當指令碼執行到這一行時會停止執行等待使用者操作，這時候可以通過切換到“Script”標籤對指令碼進行調試。 <BR>Firebug還有其它的一些調試函數，這裡就不一一做介紹，有興趣可以自己測試。表4是所有函數的列表： <BR>
<TABLE cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR>
<TD vAlign=top width=235>
<P>函數<BR></P></TD>
<TD vAlign=top width=333>說明</TD></TR>
<TR>
<TD vAlign=top width=235>console.log(object[, object, ...])</TD>
<TD vAlign=top width=333>
<P>向控制台輸出一個資訊。可以輸入多個參數，輸出將已空格分隔各參數輸出。</P>
<P>第一參數可以包含格式化文本，例如：</P>
<P>console.log(‘這裡有%d個%s',count,apple);</P>
<P>字串格式：</P>
<P>%s ：字串。</P>
<P>%d, %i：數字。</P>
<P>%f： 浮點數。</P>
<P>%o -超連結對象。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.debug(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台輸出一個資訊，資訊包含一個超連結連結到輸出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.info(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台輸出一個帶資訊表徵圖和背景顏色的資訊，資訊包含一個超連結連結到輸出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.warn(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台輸出一個帶警告圖示和背景顏色的資訊，資訊包含一個超連結連結到輸出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.error(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>向控制台輸出一個帶錯誤表徵圖和背景顏色的資訊，資訊包含一個超連結連結到輸出位置。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.assert(expression[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>測試一個表示是否為true，如果為false，提交一個例外資訊到控制台。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.dir(object)</P></TD>
<TD vAlign=top width=333>
<P>列出對象的所有屬性。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.dirxml(node)</P></TD>
<TD vAlign=top width=333>
<P>列出HTML或XML Element的XML源樹。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.trace()</P></TD>
<TD vAlign=top width=333>
<P>輸出堆棧的調用入口。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.group(object[, object, ...])</P></TD>
<TD vAlign=top width=333>
<P>將資訊分組再輸出到控制台。通過console.groupEnd()結束分組。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.groupEnd()</P></TD>
<TD vAlign=top width=333>
<P>結束分組輸出。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.time(name)</P></TD>
<TD vAlign=top width=333>
<P>建立一個名稱為name的計時器，計算代碼的執行時間，調用console.timeEnd(name)停止計時器並輸出執行時間。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.timeEnd(name)</P></TD>
<TD vAlign=top width=333>
<P>停止名稱為name的計時器並輸出執行時間。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.profile([title])</P></TD>
<TD vAlign=top width=333>
<P>開始對指令碼進行效能測試，title為測試標題。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.profileEnd()</P></TD>
<TD vAlign=top width=333>
<P>結束效能測試。</P></TD></TR>
<TR>
<TD vAlign=top width=235>
<P>console.count([title])</P></TD>
<TD vAlign=top width=333>
<P>計算代碼的執行次數。titile作為輸出標題。</P></TD></TR>
<TR>
<TD vAlign=top width=568 colSpan=2>
<P align=center>表4</P></TD></TR></TBODY></TABLE><BR><STRONG>12、 在IE中使用Firebug</STRONG> <BR>Firebug是Firefox的一個擴充，但是我習慣在IE中調試我的頁面怎麼辦。如果在頁面指令碼中加入console.log()將調試資訊寫到Friebug，在IE中肯定是提示錯誤的，怎麼辦。不用擔心，Frirebug提供了Frirbug Lite指令碼，可以插入頁面中模仿Firebug控制台。 <BR>我們可以從一下地址下載firebug lite： <BR>http://www.getfirebug.com/releases/firebuglite1.0-b1.zip <BR>然後在頁面中加入： <BR>&lt;script language="javascript" type="text/javascript" src="/路徑/firebug.js"&gt;&lt;/script&gt; <BR>如果你不想在IE中模仿Friebug控制台，只是不希望console.log()指令碼出現錯誤資訊，那麼在頁面中加入一下語句： <BR>&lt;script language="javascript" type="text/javascript" src="/路徑/firebugx.js"&gt;&lt;/script&gt; <BR>如果你不想安裝Firebug Lite，只是想避免指令碼錯誤，那麼可以在指令碼中加入以下語句： <BR>if (!window.console || !console.firebug) <BR>{ <BR>var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", <BR>"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; <BR>window.console = {}; <BR>for (var i = 0; i &lt; names.length; ++i) <BR>window.console[names[i]] = function() {} <BR>} <BR>我們將firebug.js加入到測試頁面中，然後開啟IE，載入頁面。頁面載入完成後，我們按下F12鍵就可以開啟控制台了。每次頁面重新整理後，你都要按F12鍵開啟控制台，是不是很煩。如果不想那麼，就在html標籤中加入“debug='true'”，例如： <BR>&lt;html debug="true"&gt; <BR>在Friebug Lite中也有命令列，但是功能沒那麼強。 </P>
<!--NEWSZW_HZH_END-->