Venkman
是一個JavaScript Debugger(Venkman為程式碼名稱),為Mozilla
Firefox上的一個擴充套件,在安裝完Venkman之後,使用瀏覽器開啟您的Ajax應用程式,再執行Mozilla
Firefox的「工具/JavaScript Debugger」。![]() 左上角的Loaded Scripts視窗是目前頁面中所載入的JavaScript檔案,其中包括Venkman自己的JavaScript程式檔案,選擇好想開啟的JavaScript檔案後可開啟於右邊的Source Code視窗,在當中您可以進行中斷點的設置: ![]() F表示設置一個Future中斷點,這類型中斷點是設置於函式本體之外的程式碼上,也就是載入JavaScript之後就會執行的中斷點,B表示設置一個Break中斷點。 想要查看中斷點設置,可以在Breakpoints視窗中查看… ![]() 設置好中斷點之後,您可以在瀏覽器上開始執行您的Ajax應用程式,在程式執行遇到中斷點時,可以在Venkman中進行步進追蹤… ![]() 在左上角有個Stop按鈕,那並不是用來停止Debug階段… ![]() 當按下Stop按鈕後,下一次執行任何JavaScript時,Venkman就會暫停其執行… ![]() 這個功能對於setTimeout或setInterval等自動運行的程式在除錯時很有用,可以協助能捕捉到程式下次執行時的進入點… 您可以在Breakpoints視窗中的中斷點,按右鍵進行Breakpoints properties設定… ![]() 可以設定的選項一目瞭然,可以在觸發中斷點後清除中斷點(Clear breakpont after first trigger),中間的方塊可以輸入觸發中斷點後要執行的動作,接下來您可以根據傳回值true或false,決定是否繼續執行程式,觸發行為定義中, __count__它表示遇到中斷點的次數。 在Local Variables視窗中,可以看到scope,這指示出目前作用範圍中的所有變數,通常是函式作用範圍,您還可以看到如this所參考的物件或所有變數… ![]() 如果查看的變數不是唯讀值,您可以修改它的值,再繼續執行程式… ![]() 如果覺得在Local Variables中查看變數太過麻煩,您可以使用Watches視窗… ![]() 您還可以在Call Stack視窗中,追蹤目前的呼叫堆疊… ![]() 在Venkman中還可以進行效能評測,按下Profile按鈕後,Venkman會詳細記錄JavaScript引擎的執行數據… ![]() 想要結束評測,則可以再按一次Profile按鈕,然後執行選單上「Profile/Save Profile Data as…」,將評測結果以HTML、XML或CSV格式儲存…例如HTML的儲存結果如下… ![]() JavaScript效能評測的部份可以參考Ajax in action中第八章的說明… |