本文為翻譯文章，原文地址：http://atlas.asp.net/docs/Overview/debug.aspx

???? “Atlas”程序由服務器端代碼和客戶端代碼組成，并且，瀏覽器可能會要去異步請求一些數據。那么，怎樣才能Debug這樣的web程序呢。本文將告訴你如何使用一些技術和工具來方便的完成這件事。

注：
除了Visual Studio和Internet Explorer，本文提及的一此程序是一些第三方的，微軟不會提供支持的。請到這些工具的主頁去閱讀授權和支持信息。

為了更好的Debug，先對應用程序進行配置

要啟用VS的Debug功能，請添加一個<compilation>元素在站點根目錄的web.config文件中，并且設置debug屬性為true。請參閱，ASP.NET Settings Schema, compilation element

<configuration>
????<system.web>
????????<compilation?debug="true">
????????????<!--?etc.?-->
????????</compilation>
????</system.web>
<configuration>

當Degub啟用后，“Atlas”會使用一個Debug腳本類，這個類庫將提供附加的對話信息和一個下面將講解的Debug幫助類。

在服務器端進行Tracing

如果你通過啟用“partial rendering”進行服務器端Tracing來Debug頁面（即頁面中包含一個啟用了EnablePartialRendering的ScriptManager和一個Mode為Conditional的UpdatePanel），那么你可以使用Trace視圖（Trace.axd）來顯示頁面輸出根蹤信息。此時，你可以在頁面一開始呈現時就看到根蹤輸出信息顯示在頁面的尾部，但是這些信息不會在異步Postback后進行更新，這是因為僅僅只有UpdatePanel的內容需要在變化時被更新。關于使用Trace viewer的更多信息，請參看 ASP.NET Trace.

捕獲HTTP交互

當開發web應用時，觀察服務器與客戶端來回往返的HTTP交互是很有用的，有兩個工具可以幫助我們干這件事：

??????Fiddler. 這個工具工作原理是做為一個Proxy記錄下所有HTTP交互的日志。它支持IE和其它的瀏覽器。使用Fiddler，你可以檢測每個請求和響應，包括headers,cookies,和HTTP消息主體內容。
????? Web Development Helper. 這個工具只能用于IE，但是它除了在日志中記錄HTTP交互，還能查看HTML　DOM，在一個分隔開了的窗口中顯示trace信息，關閉應用，還能解碼頁面的View state。

Debug Helper類

當你在啟用了Debug后編譯你的應用程序，“Atlas”客戶端類庫會定義一個Debugging helper類，并且實例化一個全局的debug對象供使用。使用這個debug對象，你能在頁面的尾部用易讀的方式顯示對象的信息，能顯示trace messages,能使用斷言，中斷。如果你使用VS調試器附加到IE進程中，你也可以在Output窗口中查看跟蹤信息。
下面的代碼將顯示輸出一個對象的信息：

var?o?=?{
????colors:?{
????????red:?[255,?0,?0],
????????green:?[0,?255,?0],
????????blue:?[0,?0,?255]
????},
????width:?600,
????title:?'debugging?with?"Atlas"'
};

debug.trace("output?trace?messages");
debug.dump(o,?'object?name',?true,?'?');

Output:

output trace messages
... object name {Object}
... +colors {Object}
... ++red {Array}
... +++[0]: 255
... +++[1]: 0
... +++[2]: 0
... +++0: 255
... +++1: 0
... +++2: 0
... ++green {Array}
... +++[0]: 0
... +++[1]: 255
... +++[2]: 0
... +++0: 0
... +++1: 255
... +++2: 0
... ++blue {Array}
... +++[0]: 0
... +++[1]: 0
... +++[2]: 255
... +++0: 0
... +++1: 0
... +++2: 255
... +width: 600
... +title: debugging with "Atlas"

debug類提供了以下這些方法供使用：
debug.assert(condition, message, displayCaller)?
??????? 判斷condition參數是不是為true.如果為false，這個方法將使用一個Message box顯示message參數。如果??????? displayCaller參數為true,那么調用者的信息也將顯示出來。
debug.clearTrace()?
??? 清空輸出.
debug.dump(object, name, recursive, indentationPadding)?
??? 在頁面最后用易讀的方式顯示一個對象的信息。name屬性用于在顯示時作為顯示的標簽（等于是作為顯示一大段對象的信息前作一個標題的作用），如果recursive為true,那么這個對象中的對象的信息也會遞歸顯示出來。indentationPadding用于填充在每一行信息的起始處，起一個縮進的作用。
debug.fail(message)?
??? 中斷調試器 (僅Internet Explorer).
debug.trace(text)?
??? 將text輸出到trace.

對Internet Explorer進行配置

Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. 默認情況下，IE會忽略掉JavaScript錯誤。為了支持Debug，請打開IE的Tools菜單，選擇Internet Options，在Advanced選項頁，清除Disable Script Debugging（Internet Explorer）和Disable　Script　Debugging（Other）復選框的選擇，并選中Display a nofication about every script error.結果如下圖所示：

?

將Visual Studio調試器附加到Internet Explorer

要調試客戶端代碼，你必須把一個調試器附加到IE進程去。當你在VS中使用F5或Start Debugging命令啟動調試一個應用程序時，調試器會被自動的附加到IE進程。
當然你也可以把VS的調試器附加到一個正在運行中的應用程序。你可以這樣來做，在Debug菜單，選擇Attach to Process...，在Attach to Process對象框中，選擇你想要附加調試器的IE的運行實例。

注:
如果IE被合適的配置了Debug選項，在附加調試器到IE實例進程的對話框中的類型列中，你將會看到Script,x86選項，如果你只看到x８６選項，那么請檢查你的IE配置。

當為IE進行了合適的腳本調試配置后，如果IE遇到一個腳本錯誤，而此時沒有附加進來一個調試器，這時就會顯示一個對話框，詢問你是否要選擇一個調試器附加到當前IE進程進行調試。你可以選擇不附加而繼續運行程序，也可以附加一個調試器步進調試當前的腳本代碼。

一些已知的IE調試的問題和解決方案

????? 當VS調試器被附加到IE后，你可以在VS的Script Exlorer窗口中看到一個被調試的腳本的列表，（在Debug菜單中選擇Windows-->Script Explorer）。從Microsoft.Web.Atals.dll中動態生成的Atlas的腳本庫會作為一個以WebResource.axd?...開頭資源呈現.一個已知的VS的bug會阻止你一開始就去打開這個文件，如果你在嘗試打開這個文件時，VS顯示出一個錯誤信息或當你雙擊這個文件名去打開這個文件時根本就沒有反應，你可以先打開一個別的JavaScript文件，再去打開它。
????? 在調試器步進到一個Asp.net頁面的代碼中前，VS不允許你在這個頁面中的<script>元素中設置一個斷點。解決辦法之一是設一個斷點在方法調用處，然后步進到這個頁面的Code中來，最后調試器停在該頁的腳本代碼的一行中，這時，你就可以正常的設置斷點了， 另外一種讓調試器能識別頁面中腳本的方法是在頁面文件中的一個方法中調用debug.fail()方法。當你調用這個方法時，調試器就會停止在調用debug.fail()的地方，然后，你就可以在任何其它地方設置斷點了。第三種方法是把你寫的所有腳本放在一個外部的JavaScript文件中（.js文件）。
????? VS允許你在一個傳統的JavaScript函數的第一行設置一個斷點，但在“Atlas”使用的匿名方法中不行。如果匿名方法只有一行代碼，或你本來就想在第一行設斷點，這時，你可以在這個方法的第一行前插入一行空代碼，然后在第二行設斷點。

Firefox

Firefox沒有集成到VS的調試器中，所以你不能用VS調試器步進調試客戶端代碼。 不過,你可以使用 Venkman 調試器, 它是Firefox的一個插件,還有另一個很有用的工具叫 Web Developer Extension, 它能讓你查看DOM和CSS 樣式.
Fiddler也能工作于Firefox.但是，你必須配置Firefox對于你本機８８８８端口路由HTTP請求，更多信息，請查閱 Configuring Clients?

轉載于:https://www.cnblogs.com/think/archive/2006/03/30/362756.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Atlas应用程序调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。