調試Atlas用戶端JavaScript指令碼

Dflying Chen
Microsoft MSN TC

April 2006

English Version: http://dflying.dflying.net/1/archive/115_atlas_client_side_javascript_debugging.html

應用於：
   Microsoft ASP.NET 2.0
   Microsoft ASP.NET Atlas March CTP
   Microsoft Visual Studio 2005

介紹

編寫Atlas的JavaScript指令碼將比編寫C# 更具有挑戰性，因為JavaScript沒有編譯時間期檢查，在編碼時候也沒有智能感知提示。並且您還需要在運行時Tracing Service器和用戶端的網路通訊。而且目前還沒有一個非常強大的JavaScript IDE可以幫您分擔其中繁雜的工作。

我在工作中使用Atlas有半年左右，其中積累了一些關於調試Atlas程式得知識與經驗，希望能與大家分享。其中疏漏之處，還請多多指正。

捕獲HTTP通訊內容

在任何的AJAX程式開發中，監視伺服器與用戶端的通訊內容都是非常重要的。這樣您可以得知我實際上像伺服器發送了什麼以及伺服器實際上給我返回了什麼。當您的Atlas程式遇到問題時，首先要考慮的就是查看一下用戶端與伺服器端的通訊，看看通訊的內容是不是您所期盼的。

這裡我推薦的工具是Fiddler（可以在http://www.fiddlertool.com/fiddler/下載）。Fiddler是一個HTTP調試的代理，它可以記錄您的電腦和Internet之間HTTP通訊的全部內容（包括header，cookie，通訊內容等），設定斷點，修改傳入/傳出的資料等。Fiddler比NetMon或Achilles等同類軟體簡單得多，並且提供了一個簡單但強大的基於JScript.NET的事件的指令碼子系統。Fiddler支援Internet Explorer以及其它瀏覽器。

下面是Fiddler的運行時：

使用Atlas Debug Helper Class

如果您的Atlas程式運行在debug模式下，那麼Atlas會自動為您產生一個Debug Helper Class。 這個Debug Helper Class是一個全域的對象，名稱為debug，可以在您代碼的任何部位被訪問到。使用這個debug對象的方法，您可以在運行時dump一個對象（以可讀的形式在頁面尾部顯示該對象的內部狀態），顯示trace資訊，使用斷言（assertion），break到調試器等。如果Visual Studio的指令碼調試器（參見下文）已經attach到了這個Internet Explorer上，那麼Visual Studio的Output視窗也會顯示trace資訊。

這個Debug Helper Class提供如下方法：

1. debug.assert(condition, message, displayCaller)
   斷言condition是否為true。如果condition為false，該方法將顯示出message的內容。如果displayCaller為true，該方法將顯示出調用者的資訊。
2. debug.clearTrace()
   清除trace的輸出。
3. debug.dump(object, name, recursive, indentationPadding)
   以可讀的形式在頁面尾部顯示object對象的內部狀態。name值用來顯示該對象的名稱。如果recursive為true，將遞迴顯示該對象內部的所有被包含的對象的資訊。indentationPadding值用來指定輸出的每一行的起始文本。
4. debug.fail(message)
   Break到調試器中。（僅應用於Internet Explorer中）
5. debug.trace(text)
   將text參數輸出到trace當中。

示範如何使用debug.dump()請見參考文檔

將Visual Studio 指令碼調試器attach到Internet Explorer

您可以使用Visual Studio指令碼調試器來調試您的JavaScript代碼。雖然這個調試器功能有限且有許多bug，不過我覺得它已經是此刻市面上最好的JavaScript調試器了。您需要安裝Visual Studio 2005以及 Internet Explorer 6.0或以上版本來使用Visual Studio指令碼調試器。

在預設情況下，Internet Explorer將忽略所有JavaScript指令碼錯誤。您需要手動設定一些屬性來使Internet Explorer啟用調試功能。開啟Internet Explorer視窗，在Tools菜單下選擇Internet Options，在Advanced標籤中，不要選中Disable Script Debugging (Internet Explorer)和Disable Script Debugging (Other)兩項，並選中Display a notification about every script error一項。

您需要attach調試器到Internet Explorer進程上以開始debug。在Visual Studio中使用F5來啟動調試即可。還有一種方法，您可以將Visual Studio指令碼調試器attach到已經在啟動並執行某個Internet Explorer進程上：在Internet Explorer的View菜單下，展開Script Debugger功能表項目，選擇Open。然後在彈出的對話方塊中選擇一個正在啟動並執行Visual Studio或是另外啟動一個Visual Studio。

指令碼調試器提示以及現存Bug

調試Atlas應用程式時，應該注意以下問題：

1. 當Visual Studio指令碼調試器attach到Internet Explorer上以後，您可以看到Atlas用戶端類庫將以WebResource.axd?...這樣的一個資源檔出現在Script瀏覽器中。這是伺服器端由Microsoft.Web.Atlas.dll程式集動態產生的。這裡已知的一個bug是，在剛剛開始debug的時候Visual Studio可能阻止你開啟這個檔案。也就是說當您雙擊這個檔案時候或者是沒有任何反應，或者是彈出錯誤提示。解決方案是先選擇開啟另外的JavaScript檔案，然後再試一次重新開啟，一般就會解決。（注意這個WebResource.axd?...是一個很大的檔案，需要等待一段時間才能開啟。）
2. Visual Studio不允許您在ASPX檔案中的JavaScript代碼中設定斷點。解決的方法有三個，一個是從外部的JavaScript函數中單步跟蹤到ASPX中的JavaScript，一旦調試器停在了ASPX檔案中的JavaScript，那麼您就可以在下面的某一行設定斷點了。二是在需要break的地方加上debug.fail()，這樣當Visual Studio指令碼調試器break到此處時，您就可以在其它地方設定斷點了。三是將您所有的自訂JavaScript代碼放置於外部檔案中，並在ASPX中進行引用。
3. Visual Studio不允許您在一個匿名方法（類似this.func = function()）的方法體的第一行設定斷點。您可以通過在第一行之前加入一些無意義的代碼（例如var a = 3）來使原本的第一行變成第二行，這樣即可在第二行設定相應的斷點。
4. 在debug的過程中，當您將滑鼠移到JavaScript的某個變數上的時候，可能得到的變數值是錯誤的，請看如下的，提示length為0，實際上應該為10。
   

   此時您應該選中（高亮）從對象到屬性的所有語句，然後再將滑鼠移到被選中的內容上，即可得到正確的值。請見：
   

5. 有時候在某次debug之後發現Internet Explorer中的Script Debugger功能表項目消失了，這時您可以重新開啟一個Internet Explorer視窗，即可找回這個丟失的功能表項目。

參考資源

1. http://atlas.asp.net/docs/Overview/debug.aspx