天天看點

調試JavaScript腳本程式(Firefox篇)

不知道有多少人為firefox寫程式?是以也就不知道會有多少人對這篇文章感興趣,但是無論如何,為了讓這一系列的文章趨于完整,我還是決定把它寫下來。

調試firefox裡面的腳本需要安裝一個插件venkman:

1.       啟動firefox,浏覽頁面

https://addons.mozilla.org/en-us/firefox/addon/216

2.       點選“add to firefox”,重新開機firefox就可以使用了。

下面的程式是一個測試程式,由兩個檔案組成:

test.html

<html>

   <head>

      <script type="text/javascript" src="test.js"></script>

      <script language="javascript">

          function samepagemethod()

          {

              var i = 2 * 4;

              alert(i);

          }

      </script>

   </head>

   <body>

      <input type="button" value="click function in same page"

             onclick="samepagemethod();" >

      <input type="button" value="click function in js file"

             onclick="jsfilemethod();" >

   </body>

</html>

test.js

function jsfilemethod() {

    var i = 2 * 4;

    alert("jsfilemethod: " + i);

}

先簡單地介紹一下如何在venkman裡面設定斷點和檢視變量的值。

1.       啟動firefox,運作網頁到test.html。

2.       點選firefox菜單裡面的“工具(tools)”—“javascript調試器(javascript debugger)”啟動venkman。

或者

在firefox的位址欄裡面輸入:“x-jsd:debugger”(是不是有點象ie 8.0裡面的腳本調試器啟動的方式?)

3.       下面的視窗就是venkman的啟動畫面:

調試JavaScript腳本程式(Firefox篇)

a.       在“loaded scripts(已加載的腳本)”視窗裡面會顯示目前網頁裡面已經加載的腳本程式,和解析出來的函數清單。

或者,你可以在“open windows(已打開的視窗)”視窗裡面,選擇網頁清單,然後通過點選網頁名稱檢視各個網頁引用到的腳本。

b.      輕按兩下一個腳本檔案或者函數名以後,在“source code(源代碼)”視窗裡面就會顯示相應的代碼。需要注意的是最左邊的那一列,如果上面有“--”标志,說明你可以在上面設定斷點,否則的話,就設定不了斷點(當然啦,上面的圖檔的确有一點怪啦……)。

c.       如果你不知道網頁下一行要執行什麼代碼,那麼就直接點選“stop(停止)”按鈕就可以了。

                                    i.      如果firefox正在執行一個腳本程式,那麼它會中斷這個腳本程式的執行;

                                  ii.      否則,firefox會在執行下一條腳本程式的之前停止程式的執行。如果是這種情況,那麼“stop(停止)”看起來會是下面這樣:

調試JavaScript腳本程式(Firefox篇)

4.       設定斷點很簡單,就是在“source code(源代碼)”視窗有“--”标志的代碼行裡面點一下就可以了。代碼中斷以後,你就可以檢視一些變量的值了。例如“local variables(局部變量)”視窗顯示了所有局部變量的資訊,而“watches(監視)”視窗可以輸入和跟蹤一些表達式的值(當然也包括變量的值)。如下圖所示:

調試JavaScript腳本程式(Firefox篇)

5.       而“interactive session(互動調試視窗)”提供的功能就更強大了,你可以直接輸入一些javascript表達式,venkman會顯示計算結果:

調試JavaScript腳本程式(Firefox篇)

繼續閱讀