2.6  JavaScript調(diào)試工具

一直以來，Java開發(fā)過程的進(jìn)步與其調(diào)試架構(gòu)是分不開的，這種調(diào)試架構(gòu)使在源代碼中一步一步地調(diào)試程序變得非常簡單。當(dāng)今的很多Java IDE都具有異常強(qiáng)大的調(diào)試環(huán)境，它們允許你調(diào)試標(biāo)準(zhǔn)的Java SE應(yīng)用、部署到本地Java EE應(yīng)用服務(wù)器上的應(yīng)用，甚至是部署到遠(yuǎn)程Java EE服務(wù)器上的應(yīng)用。

調(diào)試傳統(tǒng)的JavaScript要比Java困難得多，因為JavaScript缺少一個高質(zhì)量的調(diào)試環(huán)境。這一缺陷現(xiàn)在得到了改善。作為基于Mozilla的瀏覽器（如Firefox）的擴(kuò)展，Venkman JavaScript調(diào)試器提供了一個功能完整的JavaScript調(diào)試環(huán)境。

下面我們將簡單介紹Venkman及其功能。可以在www.svendtofte.com/code/learning_venkman上找到一份更全面的教程。

使用Venkman

可以從www.mozilla.org/projects/venkman/獲得Venkman。Venkman的開發(fā)始于2001年4月，由Robert Ginda發(fā)起。Venkman基于Mozilla的名為js/jsd的JavaScript調(diào)試API。js/jsd API構(gòu)成了Netscape JavaScript調(diào)試器的基礎(chǔ)，后者可以用在Netscape瀏覽器的4.x系列版本中。

在安裝好Venkman之后，可以通過Firefox中的Tools→JavaScript Debugger菜單項啟動它。圖2-17展示了Venkman的默認(rèn)布局。

Venkman提供了非常多的信息，這些信息分別顯示在8個窗格中。默認(rèn)布局中有一個較大的窗格用來顯示選中的源代碼。窗口的左邊垂直排列著三個較小的窗格。在Source Code窗格下方是Venkman的命令行界面，它位于窗口的底部。

可以用鼠標(biāo)拖動每個窗口并把它們放置到主窗口的任意位置。還可以把一個窗格添加為另一個現(xiàn)有窗格的獨立標(biāo)簽頁。例如，根據(jù)圖2-17，如果想要把Loaded Scripts標(biāo)簽頁放置到Local Variables窗格中，只需把Loaded Scripts標(biāo)簽頁拖放至Local Variables標(biāo)簽頁即可。也可以把窗格從主窗口中分離出來，只需單擊窗格標(biāo)題欄左側(cè)的控制按鈕即可。再次單擊該控制按鈕就可以使窗格回到主窗口中。

圖2-17  Venkman的默認(rèn)窗口布局

在使用Venkman的過程中，你會根據(jù)自己的需要經(jīng)常使用幾個面板。單擊窗格標(biāo)題欄右側(cè)的×按鈕可以關(guān)閉不常用的窗格?？梢酝ㄟ^選擇View→Show/Hide來重新打開這些窗格。如果想恢復(fù)窗格布局的默認(rèn)設(shè)置，只需在Interactive Session窗格中的命令行界面中輸入/restore-layout factory即可。

1. 查看已加載的腳本

啟動Venkman后，它會識別瀏覽器窗口中當(dāng)前頁面上所有可用的JavaScript。Venkman可以識別出在HTML頁面中使用<script>標(biāo)簽嵌入的JavaScript以及使用<script src="js_file.js">標(biāo)簽引入的外部JavaScript文件。

Venkman把當(dāng)前可用的JavaScript顯示在Loaded Scripts窗格中。單擊每個文件邊上的加號可以打開一個文件內(nèi)部信息列表，它詳細(xì)列出了文件中所有可用的JavaScript函數(shù)以及這些函數(shù)出現(xiàn)在文件中的行號。另外，它還可以顯示函數(shù)所包含的代碼行號。在Loaded Scripts窗格中雙擊一個函數(shù)會在Source Code窗格中顯示該文件并直接滾動到該函數(shù)所在的位置。

右鍵單擊Loaded Scripts窗格中的文件會為文件本身和文件中的JavaScript函數(shù)顯示出一些選項。對文件來說，這個右鍵菜單允許你執(zhí)行如下一些操作，比如禁止調(diào)試eval和timeout聲明，禁止調(diào)試函數(shù)，以及禁止對函數(shù)進(jìn)行性能監(jiān)控。對單個函數(shù)來說，這個右鍵菜單提供了禁止調(diào)試和禁止性能分析的功能。

2. 源代碼

Source Code窗格會列出當(dāng)前文件的源代碼。文件的類型可以是HTML、XHTML或JavaScript。Source Code窗格實現(xiàn)了標(biāo)簽頁機(jī)制，因此可以一次打開多個文件，每個文件都顯示在自己的標(biāo)簽頁中。Venkman會使用一些簡單的顏色顯示代碼，這樣可以提高可讀性。JavaScript關(guān)鍵字如function和var會顯示為粗體，字符串則會顯示為不同的顏色。窗格左側(cè)是文件的代碼行編號，再左側(cè)是用于設(shè)置斷點的側(cè)邊欄。

3. 斷點

Venkman支持兩種斷點：硬（hard）斷點和將來（future）斷點。這與絕大多數(shù)調(diào)試環(huán)境都不太一樣，因此我們會討論這兩種斷點間的區(qū)別。

硬斷點就是你經(jīng)常在像Java這樣的現(xiàn)代編程語言中使用的斷點。它會指示Venkman在斷點處掛起程序的執(zhí)行。在收到用戶的指示之前，程序不能繼續(xù)執(zhí)行。在Venkman中，硬斷點總是設(shè)置在函數(shù)體內(nèi)。

將來斷點與硬斷點類似，它也指示Venkman在斷點處掛起JavaScript的執(zhí)行。兩者的不同之處在于，將來斷點總是設(shè)置在函數(shù)體外。這些代碼會在瀏覽器加載它們之后立即執(zhí)行。相反，函數(shù)體中的代碼則一直到該函數(shù)響應(yīng)用戶的操作或事件時才會執(zhí)行。

在很大程度上，大可不必在意硬斷點和將來斷點之間的區(qū)別。在大部分情況下，都會使用硬斷點，它們應(yīng)該與其他調(diào)試環(huán)境中的斷點具有相同的功能。

Venkman提供了一個列出所有當(dāng)前斷點的窗口。當(dāng)你調(diào)試的頁面在多個文件中含有多個斷點的時候，這就會非常方便。所有設(shè)置了斷點的文件都會顯示在Breakpoints窗格中，在每個文件下面會列出這個文件的所有斷點。

4. 分步執(zhí)行代碼

設(shè)置好斷點之后，就可以開始調(diào)試代碼了。Venkman會在遇到斷點時自動掛起程序的執(zhí)行。那時，就可以控制腳本的執(zhí)行了。你可以查看變量值，修改變量值，并繼續(xù)執(zhí)行腳本，可以分步執(zhí)行代碼或重新啟動并完成執(zhí)行過程。

在遇到斷點時，Venkman為開發(fā)人員提供了幾個用來分步執(zhí)行代碼的選擇。一旦遇到斷點，可以選擇Continue、Step Over、Step Into或Step Out。

Continue選項會重新啟動腳本的執(zhí)行。執(zhí)行過程會一直繼續(xù)，直到遇到另一個斷點或腳本結(jié)束。當(dāng)需要跟蹤一個問題的位置時，Continue屬性非常有用。你可以沿著程序執(zhí)行鏈設(shè)置多個斷點，并且在每次遇到斷點的時候查看變量值以確定問題是否已經(jīng)出現(xiàn)。一旦問題出現(xiàn)了，就可以知道這個問題是出現(xiàn)在當(dāng)前斷點和前一個斷點之間，這樣就可以從那里繼續(xù)縮小錯誤出現(xiàn)的區(qū)域。Continue選項還可以用來調(diào)試迭代?？梢栽诘哪程幵O(shè)置斷點并使用Continue選項一次一次地執(zhí)行迭代代碼，并在每次掛起的時候檢查是否出現(xiàn)任何問題。

Step Over功能可以使你避免進(jìn)入當(dāng)前函數(shù)調(diào)用的函數(shù)。那個被調(diào)用的函數(shù)可能已經(jīng)被調(diào)試過了并且你知道問題不在那兒，或者你就是不想進(jìn)入那個函數(shù)的代碼，因為你只關(guān)心當(dāng)前函數(shù)。需要記住的是，越過一個函數(shù)并不會影響這個函數(shù)的執(zhí)行；它只是表示你不打算一行一行地調(diào)試該函數(shù)。

Step Into選項和Step Over功能正好相反。Step Into會進(jìn)入一個被調(diào)用的函數(shù)，這樣就可以調(diào)試這個被調(diào)用的函數(shù)了。合理使用Step Over和Step Into可以幫助你確定錯誤的具體位置。

5. 局部變量列表

Local Variables窗格允許你在腳本運(yùn)行時查看甚至修改變量的值。每當(dāng)遇到斷點并掛起腳本執(zhí)行時，Local Variables窗格就會顯示當(dāng)前作用域內(nèi)的所有變量。

Local Variables窗格具有兩個頂級項：Scope和This。Scope指向程序執(zhí)行的當(dāng)前最近作用域內(nèi)的所有變量。因為大多數(shù)JavaScript都會被編寫為函數(shù)，所以這個最近作用域往往是函數(shù)作用域。例如，如果遇到了一個函數(shù)內(nèi)的斷點，那么Local Variables窗格中的Scope項就會指向該函數(shù)作用域內(nèi)的所有變量——也就是在該函數(shù)中使用關(guān)鍵字var定義的任何變量。從技術(shù)上來說，函數(shù)可以訪問那些定義在全局作用域內(nèi)的變量（定義在函數(shù)體外的變量），但是它們不會顯示在當(dāng)前變量作用域中。

Local Variables窗格中顯示的第二個頂級項是This項。This項指向關(guān)鍵字this指代的任何對象。如果在一個函數(shù)中遇到斷點，而這個函數(shù)又是一個對象的一部分，那么this指代的就是當(dāng)前對象的實例。正常情況下，this引用的是瀏覽器的window對象。需要注意的是，在全局作用域內(nèi)定義的任何變量都會出現(xiàn)在This項下面。

局部變量列表還允許在運(yùn)行時修改變量的值。這一功能非常強(qiáng)大，它可以幫助你測試不同變量值對腳本輸出的影響。當(dāng)你覺得自己發(fā)現(xiàn)了一個問題的時候，還可以使用這一功能修改變量的值，看看是否可以解決這個問題。

右鍵單擊想要修改的變量值，在右鍵菜單中選擇Change Value。這會打開一個提示窗口，可以在里面修改變量的值。可以在提示窗口中輸入任何合法的JavaScript表達(dá)式，包括new Object()這樣的表達(dá)式。確保所有的字符串都加上了雙引號或單引號。記住，在提示窗口中還可以通過變量名引用其他變量。