JavaScript指令碼調試方法

 JavaScript指令碼調試方法

開發ASP.NET控制項是ASP.NET編程中底層的技術，控制項必須具備豐富的用戶端互動功能。可以直接在控制項中加入JavaScript標準，也可以把一些比較好的第三方用戶端組件集（如 Prototype.js和JQuery等）嵌入到控制項中，不管使用哪種方式，都要學會JavaScript調試技術。下面就講解一下JavaScript的各種調試技術。

首先設定IE，依次選擇"Tools"→"Internet Options"→"Advanced"，找到Browsing下的兩個禁用指令碼調試複選框，取消對其的選擇（IE預設將這兩項選中，故不能進行指令碼調試），2-8所示。

圖2-8 "Internet Options"（瀏覽器選項）視窗

經過以上設定，取消IE預設的禁用功能，就可以調試指令碼了。

2.4.1 調試頁面中的JavaScript指令碼（方法一）

從頁面DebugControl.aspx中找到預置樣本指令碼時加入的ClientClickEvent用戶端方法。按F9鍵在alert語句中設定一個斷點，會發現在VS 2005中根本不能在頁面中設定斷點（VS 2008則直接可以設定斷點，就沒有VS 2005這樣麻煩，不過此方法也可以用於VS 2008）。沒關係，我們可以在alert語句之前加一句"debugger；"。修改後ClientClickEvent方法代碼如下：

  

   
/// <summary>
   
/// 獲得本書更多內容,請看:
   
/// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
   
/// </summary> 
   
<script language="javascript">
   
        function ClientClickEvent()
   
        {          
   
            debugger;  
   
            alert('我被點擊了一下!');
   
        }
   
</script>
  

在瀏覽器運行DebugControl.aspx頁面，並單擊頁面中的按鈕，則程式在運行到"debugger；"語句後會彈出"選擇調試器視窗"，2-9所示.
可以從上面視窗任意選擇一個調試器（以上只有VS調試器，如果安裝了其他調試器，則也會在這裡列出），選擇按鈕"是（Y）"，程式即可在斷點中斷。

圖2-9 選擇調試器視窗

2.4.2 調試頁面中的JavaScript指令碼（方法二）

上一節所遇到的VS 2005（VS 2008之前版本）中不能在 *.aspx頁面中為用戶端指令碼設定斷點問題，是使用"debugger；"語句進行跟蹤調試來解決的。

在頁面運行之前是不能夠設定斷點的，但可以在運行後手動啟動調試器，這樣就可以設定斷點了。

按"Ctrl+F5"按鍵組合（與F5鍵的區別是不啟用跟蹤調試環境）運行頁面。在瀏覽器中呈現DebugControl.aspx測試頁面後，依次選擇瀏覽器的菜單"查看"→"指令碼偵錯工具"→"開啟"命令，2-10所示。

圖2-10 執行功能表命令

選擇命令後即可彈出"選擇調試器視窗"視窗（圖2-9），供選擇調試器，選擇"新執行個體Visual Studio 2005"項並單擊"是（Y）"按鈕，會彈出一個新的IDE環境。

在彈出的新IDE環境中找到alert語句，並在此語句設定一個斷點。然後切換到正開啟DebugControl.aspx頁面的瀏覽器，單擊"調試用戶端指令碼"按鈕，即可進行調試。

2.4.3 調試非嵌入式JavaScript指令檔

非嵌入式指令碼一般是指當前運行網站某個檔案夾下面的JavaScript檔案。

首先配置指令檔環境。建立一個指令檔Jscript.js，把頁面DebugControl.aspx中的ClientClickEvent方法複製到建立檔案，並將這個檔案引用到頁面中，如下所示:

  

   
<script src=JScript.js type="text/jscript"></script>
  

調試JavaScript指令檔中的指令碼比較簡單，除了按照2.4.1節提到的用"debugger；"語句的方法，更簡單的方法是在要跟蹤調試的語句上按F9鍵設定一個斷點，再按F5鍵運行，程式運行到斷點後會自動中斷。

2.4.4 調試嵌入式JavaScript指令碼資源檔

嵌入式資源檔是指編譯到服務端控制項原始碼DLL中的資源，比片、樣式檔案、用戶端指令碼檔案等，這樣的好處是整個控制項最終只有一個DLL，易於部署，後面會有章節專門講解嵌入式資源，這裡僅說明其調試方法。

在VS 2008之前的版本，比如VS 2005預設是不可以調試嵌入式資源檔的，不過可以安裝能夠調試嵌入式資源檔的調試器，這裡推薦一個筆者經常使用的調試器 -- -- Office 2003安裝程式帶的調試器（安裝時從附帶的擴充工具裡找到它），安裝好之後即可以通過上面的方法進行調試。比如在嵌入式指令檔中使用debugger命令設定斷點後，程式運行到該語句時會彈出調試器選擇視窗，注意要選擇Microsoft Script Editor，2-11所示。

圖2-11 Office 2003中的指令碼調試器

對於VS 2008，則不用這麼麻煩，調試嵌入式資源檔的方式與調試非嵌入式資源檔完全相同，其餘的事情由VS 2008內部處理。

2.4.5 高效率調試的技巧

1．debugger提示

當控制項陳列庫比較大時，可以在一些關鍵的代碼地方設定一些debugger命令，並設定執行條件，從而避免每次手動輸入這些命令串，以及尋找關鍵的資料點，再設定斷點，這些操作都相當費時。另外，如果這些指令碼已經作為嵌入資源打包到DLL中，則無法設定斷點。下面這種方案可以解決這些問題，直接看一下例子：

  

   
/// <summary>
   
/// 獲得本書更多內容,請看:
   
/// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
   
/// </summary> 
   
var StartDebugger = false;
   
function Method1()
   
{
   
    //... ...
   
    if(StartDebugger)
   
    {
   
        debugger;
   
    }
   
    //... ...
   
}
   
 
   
function Method2()
   
{
   
    //... ...
   
    if(StartDebugger)
   
    {
   
        debugger;
   
    }
   
    //... ...
   
     if(StartDebugger)
   
    {
   
        debugger;
   
    }
   
    //... ...
   
}
   
function Method3()
   
{
   
    //... ...
   
     if(StartDebugger)
   
    {
   
        debugger;
   
    }
   
    //... ...
   
}
  

假設這是一些控制項中的指令碼函數，有"//... ..."標記的是省略的代碼。在方法外面定義了一個StartDebugger變數，並且設定其為false，這裡的StartDebugger變數就是一個普通的JavaScript變數。

經過以上設定，預設情況下由於StartDebugger值為false（初始化值），所以這些Method方法中的"debugger；"語句始終不會執行，這樣就可以把組件打包發給使用控制項的開發人員了。

假如使用控制項的開發人員遇到問題，需要我們協助，這時只需要在他出問題的頁面中加入如下代碼即可調試：

  

   
<form id="form1" runat="server">
   
    <script language=javascript>
   
 
   
        StartDebugger=true;
   
 
   
    </script>
   
</form>
  

注意要保證"StartDebugger = true"在較晚的事件中執行，否則會報StartDebugger未定義錯誤。

使用這種方法就不用每次尋找關鍵斷點位置設斷點，為自己也為開發人員節省了時間。此方案是筆者的同事們比較喜歡使用的一種方案。

2．在IE地址欄中執行輸出指令碼

這裡主要使用地址欄執行指令碼的功能。請看圖2-12。StartDebugger是在頁面上定義的一個變數，先通過瀏覽器運行頁面後，再直接在地址欄中輸入圖2-12中的命令，即可得到StartDebugger的值，圖2-13是它的執行結果。

圖2-12 在瀏覽器地址欄中運行指令碼

 

圖2-13 瀏覽器地址欄中指令碼執行結果

這種方法的好處是不用啟動調試。如果繼續想看頁面中所有的東西，可以在瀏覽器中執行一個錯誤語句，比如把上面語句改為：

javascript:alert(abc);

由於abc在頁面上沒有定義，則系統會自動彈出調試器視窗，您可在此視窗選擇調試器並開始調試。

 

引用：http://msdn.microsoft.com/zh-cn/dd567278.aspx