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

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

注：
除了Visual Studio和Internet Explorer，本文提及的一此程序是一些第三方的，微軟不會(huì)提供支持的。請(qǐng)到這些工具的主頁(yè)去閱讀授權(quán)和支持信息。

為了更好的Debug，先對(duì)應(yīng)用程序進(jìn)行配置

要啟用VS的Debug功能，請(qǐng)?zhí)砑右粋€(gè)<compilation>元素在站點(diǎn)根目錄的web.config文件中，并且設(shè)置debug屬性為true。請(qǐng)參閱，ASP.NET Settings Schema, compilation element

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

當(dāng)Degub啟用后，“Atlas”會(huì)使用一個(gè)Debug腳本類，這個(gè)類庫(kù)將提供附加的對(duì)話信息和一個(gè)下面將講解的Debug幫助類。

在服務(wù)器端進(jìn)行Tracing

如果你通過(guò)啟用“partial rendering”進(jìn)行服務(wù)器端Tracing來(lái)Debug頁(yè)面（即頁(yè)面中包含一個(gè)啟用了EnablePartialRendering的ScriptManager和一個(gè)Mode為Conditional的UpdatePanel），那么你可以使用Trace視圖（Trace.axd）來(lái)顯示頁(yè)面輸出根蹤信息。此時(shí)，你可以在頁(yè)面一開(kāi)始呈現(xiàn)時(shí)就看到根蹤輸出信息顯示在頁(yè)面的尾部，但是這些信息不會(huì)在異步Postback后進(jìn)行更新，這是因?yàn)閮H僅只有UpdatePanel的內(nèi)容需要在變化時(shí)被更新。關(guān)于使用Trace viewer的更多信息，請(qǐng)參看 ASP.NET Trace.

捕獲HTTP交互

當(dāng)開(kāi)發(fā)web應(yīng)用時(shí)，觀察服務(wù)器與客戶端來(lái)回往返的HTTP交互是很有用的，有兩個(gè)工具可以幫助我們干這件事：

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

Debug Helper類

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

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參數(shù)是不是為true.如果為false，這個(gè)方法將使用一個(gè)Message box顯示message參數(shù)。如果??????? displayCaller參數(shù)為true,那么調(diào)用者的信息也將顯示出來(lái)。
debug.clearTrace()?
??? 清空輸出.
debug.dump(object, name, recursive, indentationPadding)?
??? 在頁(yè)面最后用易讀的方式顯示一個(gè)對(duì)象的信息。name屬性用于在顯示時(shí)作為顯示的標(biāo)簽（等于是作為顯示一大段對(duì)象的信息前作一個(gè)標(biāo)題的作用），如果recursive為true,那么這個(gè)對(duì)象中的對(duì)象的信息也會(huì)遞歸顯示出來(lái)。indentationPadding用于填充在每一行信息的起始處，起一個(gè)縮進(jìn)的作用。
debug.fail(message)?
??? 中斷調(diào)試器 (僅Internet Explorer).
debug.trace(text)?
??? 將text輸出到trace.

對(duì)Internet Explorer進(jìn)行配置

Internet Explorer normally ignores any problems it encounters in JavaScript. To enable debugging, from the Tools menu, select Internet Options. 默認(rèn)情況下，IE會(huì)忽略掉JavaScript錯(cuò)誤。為了支持Debug，請(qǐng)打開(kāi)IE的Tools菜單，選擇Internet Options，在Advanced選項(xiàng)頁(yè)，清除Disable Script Debugging（Internet Explorer）和Disable　Script　Debugging（Other）復(fù)選框的選擇，并選中Display a nofication about every script error.結(jié)果如下圖所示：

?

將Visual Studio調(diào)試器附加到Internet Explorer

要調(diào)試客戶端代碼，你必須把一個(gè)調(diào)試器附加到IE進(jìn)程去。當(dāng)你在VS中使用F5或Start Debugging命令啟動(dòng)調(diào)試一個(gè)應(yīng)用程序時(shí)，調(diào)試器會(huì)被自動(dòng)的附加到IE進(jìn)程。
當(dāng)然你也可以把VS的調(diào)試器附加到一個(gè)正在運(yùn)行中的應(yīng)用程序。你可以這樣來(lái)做，在Debug菜單，選擇Attach to Process...，在Attach to Process對(duì)象框中，選擇你想要附加調(diào)試器的IE的運(yùn)行實(shí)例。

注:
如果IE被合適的配置了Debug選項(xiàng)，在附加調(diào)試器到IE實(shí)例進(jìn)程的對(duì)話框中的類型列中，你將會(huì)看到Script,x86選項(xiàng)，如果你只看到x８６選項(xiàng)，那么請(qǐng)檢查你的IE配置。

當(dāng)為IE進(jìn)行了合適的腳本調(diào)試配置后，如果IE遇到一個(gè)腳本錯(cuò)誤，而此時(shí)沒(méi)有附加進(jìn)來(lái)一個(gè)調(diào)試器，這時(shí)就會(huì)顯示一個(gè)對(duì)話框，詢問(wèn)你是否要選擇一個(gè)調(diào)試器附加到當(dāng)前IE進(jìn)程進(jìn)行調(diào)試。你可以選擇不附加而繼續(xù)運(yùn)行程序，也可以附加一個(gè)調(diào)試器步進(jìn)調(diào)試當(dāng)前的腳本代碼。

一些已知的IE調(diào)試的問(wèn)題和解決方案

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

Firefox

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

轉(zhuǎn)載于:https://www.cnblogs.com/think/archive/2006/03/30/362756.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。