火狐js調試插件venkman使用

做爲基於Mozilla的瀏覽器(如Firefox)的擴展,Venkman JavaScript調試器提供了一個功能完整的JavaScript調試環境。
下面咱們將簡單介紹Venkman及其功能。能夠在www.svendtofte.com/code/learning_venkman上找到一份更全面的教程。
使用Venkman
能夠從www.mozilla.org/projects/venkman/得到Venkman。Venkman的開發始於2001年4月,由Robert Ginda發起。Venkman基於Mozilla的名爲js/jsd的JavaScript調試API。js/jsd API構成了Netscape JavaScript調試器的基礎,後者能夠用在Netscape瀏覽器的4. x系列版本中。
在安裝好Venkman以後,能夠經過Firefox中的Tools→JavaScript Debugger菜單項啓動它。圖2-17展現了Venkman的默認佈局。
Venkman提供了很是多的信息,這些信息分別顯示在8個窗格中。默認佈局中有一個較大的窗格用來顯示選中的源代碼。窗口的左邊垂直排列着三個較小的窗格。在Source Code窗格下方是Venkman的命令行界面,它位於窗口的底部。
能夠用鼠標拖動每一個窗口並把它們放置到主窗口的任意位置。還能夠把一個窗格添加爲另外一個現有窗格的獨立標籤頁。例如,根據圖2-17,若是想要把Loaded Scripts標籤頁放置到Local Variables窗格中,只需把Loaded Scripts標籤頁拖放至Local Variables標籤頁便可。也能夠把窗格從主窗口中分離出來,只需單擊窗格標題欄左側的控制按鈕便可。再次單擊該控制按鈕就可使窗格回到主窗口中。
圖2-17  Venkman的默認窗口布局
在使用Venkman的過程當中,你會根據本身的須要常用幾個面板。單擊窗格標題欄右側的 ×按鈕能夠關閉不經常使用的窗格。能夠經過選擇View→Show/Hide來從新打開這些窗格。若是想恢復窗格佈局的默認設置,只需在Interactive Session窗格中的命令行界面中輸入/restore-layout factory便可。
1. 查看已加載的腳本
啓動Venkman後,它會識別瀏覽器窗口中當前頁面上全部可用的JavaScript。Venkman能夠識別出在HTML頁面中使用<script>標籤嵌入的JavaScript以及使用<script src="js_file.js">標籤引入的外部JavaScript文件。
Venkman把當前可用的JavaScript顯示在Loaded Scripts窗格中。單擊每一個文件邊上的加號能夠打開一個文件內部信息列表,它詳細列出了文件中全部可用的JavaScript函數以及這些函數出如今文件中的行號。另外,它還能夠顯示函數所包含的代碼行號。在Loaded Scripts窗格中雙擊一個函數會在Source Code窗格中顯示該文件並直接滾動到該函數所在的位置。
右鍵單擊Loaded Scripts窗格中的文件會爲文件自己和文件中的JavaScript函數顯示出一些選項。對文件來講,這個右鍵菜單容許你執行以下一些操做,好比禁止調試eval和timeout聲明,禁止調試函數,以及禁止對函數進行性能監控。對單個函數來講,這個右鍵菜單提供了禁止調試和禁止性能分析的功能。
2. 源代碼
Source Code窗格會列出當前文件的源代碼。文件的類型能夠是HTML、XHTML或JavaScript。Source Code窗格實現了標籤頁機制,所以能夠一次打開多個文件,每一個文件都顯示在本身的標籤頁中。Venkman會使用一些簡單的顏色顯示代碼,這樣能夠提升可讀性。JavaScript關鍵字如function和var會顯示爲粗體,字符串則會顯示爲不一樣的顏色。窗格左側是文件的代碼行編號,再左側是用於設置斷點的側邊欄。
3. 斷點
Venkman支持兩種斷點:硬(hard)斷點和未來(future)斷點。這與絕大多數調試環境都不太同樣,所以咱們會討論這兩種斷點間的區別。
硬斷點就是你常常在像Java這樣的現代編程語言中使用的斷點。它會指示Venkman在斷點處掛起程序的執行。在收到用戶的指示以前,程序不能繼續執行。在Venkman中,硬斷點老是設置在函數體內。
未來斷點與硬斷點相似,它也指示Venkman在斷點處掛起JavaScript的執行。二者的不一樣之處在於,未來斷點老是設置在函數體外。這些代碼會在瀏覽器加載它們以後當即執行。相反,函數體中的代碼則一直到該函數響應用戶的操做或事件時纔會執行。
在很大程度上,大可沒必要在乎硬斷點和未來斷點之間的區別。在大部分狀況下,都會使用硬斷點,它們應該與其餘調試環境中的斷點具備相同的功能。
Venkman提供了一個列出全部當前斷點的窗口。當你調試的頁面在多個文件中含有多個斷點的時候,這就會很是方便。全部設置了斷點的文件都會顯示在Breakpoints窗格中,在每一個文件下面會列出這個文件的全部斷點。
4. 分步執行代碼
設置好斷點以後,就能夠開始調試代碼了。Venkman會在遇到斷點時自動掛起程序的執行。那時,就能夠控制腳本的執行了。你能夠查看變量值,修改變量值,並繼續執行腳本,能夠分步執行代碼或從新啓動並完成執行過程。
在遇到斷點時,Venkman爲開發人員提供了幾個用來分步執行代碼的選擇。一旦遇到斷點,能夠選擇Continue、Step Over、Step Into或Step Out。
Continue選項會從新啓動腳本的執行。執行過程會一直繼續,直到遇到另外一個斷點或腳本結束。當須要跟蹤一個問題的位置時,Continue屬性很是有用。你能夠沿着程序執行鏈設置多個斷點,而且在每次遇到斷點的時候查看變量值以肯定問題是否已經出現。一旦問題出現了,就能夠知道這個問題是出如今當前斷點和前一個斷點之間,這樣就能夠從那裏繼續縮小錯誤出現的區域。Continue選項還能夠用來調試迭代。能夠在迭代的某處設置斷點並使用Continue選項一次一次地執行迭代代碼,並在每次掛起的時候檢查是否出現任何問題。
Step Over功能可使你避免進入當前函數調用的函數。那個被調用的函數可能已經被調試過了而且你知道問題不在那兒,或者你就是不想進入那個函數的代碼,由於你只關心當前函數。須要記住的是,越過一個函數並不會影響這個函數的執行;它只是表示你不打算一行一行地調試該函數。
Step Into選項和Step Over功能正好相反。Step Into會進入一個被調用的函數,這樣就能夠調試這個被調用的函數了。合理使用Step Over和Step Into能夠幫助你肯定錯誤的具體位置。
5. 局部變量列表
Local Variables窗格容許你在腳本運行時查看甚至修改變量的值。每當遇到斷點並掛起腳本執行時,Local Variables窗格就會顯示當前做用域內的全部變量。
Local Variables窗格具備兩個頂級項:Scope和This。Scope指向程序執行的當前最近做用域內的全部變量。由於大多數JavaScript都會被編寫爲函數,因此這個最近做用域每每是函數做用域。例如,若是遇到了一個函數內的斷點,那麼Local Variables窗格中的Scope項就會指向該函數做用域內的全部變量——也就是在該函數中使用關鍵字var定義的任何變量。從技術上來講,函數能夠訪問那些定義在全局做用域內的變量(定義在函數體外的變量),可是它們不會顯示在當前變量做用域中。
Local Variables窗格中顯示的第二個頂級項是This項。This項指向關鍵字this指代的任何對象。若是在一個函數中遇到斷點,而這個函數又是一個對象的一部分,那麼this指代的就是當前對象的實例。正常狀況下,this引用的是瀏覽器的window對象。須要注意的是,在全局做用域內定義的任何變量都會出如今This項下面。
局部變量列表還容許在運行時修改變量的值。這一功能很是強大,它能夠幫助你測試不一樣變量值對腳本輸出的影響。當你以爲本身發現了一個問題的時候,還可使用這一功能修改變量的值,看看是否能夠解決這個問題。
右鍵單擊想要修改的變量值,在右鍵菜單中選擇Change Value。這會打開一個提示窗口,能夠在裏面修改變量的值。能夠在提示窗口中輸入任何合法的JavaScript表達式,包括new Object()這樣的表達式。確保全部的字符串都加上了雙引號或單引號。記住,在提示窗口中還能夠經過變量名引用其餘變量。

相關文章
相關標籤/搜索