Atlas應(yīng)用程序的調(diào)試技巧

2019-11-17 04:47:21

字體：大中小

供稿：網(wǎng)友

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

　　注：

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

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

　　要啟用VS的Debug功能，請?zhí)砑右粋€＜compilation＞元素在站點根目錄的web.config文件中，并且設(shè)置debug屬性為true。請參閱，asp.net Settings Schema, compilation element

Atlas應(yīng)用程序的調(diào)試技巧（圖一）

＜configuration＞
Atlas應(yīng)用程序的調(diào)試技巧（圖二）

＜system.web＞
Atlas應(yīng)用程序的調(diào)試技巧（圖三）

＜compilation debug="true"＞
Atlas應(yīng)用程序的調(diào)試技巧（圖四）

＜!-- etc. --＞
Atlas應(yīng)用程序的調(diào)試技巧（圖五）

＜/compilation＞
Atlas應(yīng)用程序的調(diào)試技巧（圖六）

＜/system.web＞
Atlas應(yīng)用程序的調(diào)試技巧（圖七）

＜configuration＞
Atlas應(yīng)用程序的調(diào)試技巧（圖八）

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

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

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

　　捕捉HTTP交互

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

　　Fiddler. 這個工具工作原理是做為一個PRoxy記錄下所有HTTP交互的日志。它支持IE和其它的瀏覽器。使用Fiddler，你可以檢測每個請求和響應(yīng)，包括headers,cookies,和HTTP消息主體內(nèi)容。

　　Web Development Helper. 這個工具只能用于IE，但是它除了在日志中記錄HTTP交互，還能查看Html　DOM，在一個分隔開了的窗口中顯示trace信息，關(guān)閉應(yīng)用，還能解碼頁面的View state。

　　Debug Helper類

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

　　下面的代碼將顯示輸出一個對象的信息：

Atlas應(yīng)用程序的調(diào)試技巧（圖九）

var o =

{

colors:

{

red: [255, 0, 0],
Atlas應(yīng)用程序的調(diào)試技巧（圖十六）

green: [0, 255, 0],
Atlas應(yīng)用程序的調(diào)試技巧（圖十七）

blue: [0, 0, 255]
Atlas應(yīng)用程序的調(diào)試技巧（圖十八）

width: 600,
Atlas應(yīng)用程序的調(diào)試技巧（圖二十）

title: 'debugging with "Atlas"'
Atlas應(yīng)用程序的調(diào)試技巧（圖二十）

};

debug.trace("output trace messages");
Atlas應(yīng)用程序的調(diào)試技巧（圖二十四）

debug.dump(o, 'object name', true, ' Atlas應(yīng)用程序的調(diào)試技巧（圖二十五）

');

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，這個方法將使用一個Message box顯示message參數(shù)。假如 displayCaller參數(shù)為true,那么調(diào)用者的信息也將顯示出來。

debug.clearTrace()

　　清空輸出.

debug.dump(object, name, recursive, indentationPadding)

　　在頁面最后用易讀的方式顯示一個對象的信息。name屬性用于在顯示時作為顯示的標簽（等于是作為顯示一大段對象的信息前作一個標題的作用），假如recursive為true,那么這個對象中的對象的信息也會遞歸顯示出來。indentationPadding用于填充在每一行信息的起始處，起一個縮進的作用。

debug.fail(message)

　　中斷調(diào)試器 (僅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）復(fù)選框的選擇，并選中Display a nofication about every script error.結(jié)果如下圖所示：

Atlas應(yīng)用程序的調(diào)試技巧（圖二十七）

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

　　要調(diào)試客戶端代碼，你必須把一個調(diào)試器附加到IE進程去。當你在VS中使用F5或Start Debugging命令啟動調(diào)試一個應(yīng)用程序時，調(diào)試器會被自動的附加到IE進程。

　　當然你也可以把VS的調(diào)試器附加到一個正在運行中的應(yīng)用程序。你可以這樣來做，在Debug菜單，選擇Attach to Process...，在Attach to Process對象框中，選擇你想要附加調(diào)試器的IE的運行實例。

　　注:

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

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

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

　　當VS調(diào)試器被附加到IE后，你可以在VS的Script Exlorer窗口中看到一個被調(diào)試的腳本的列表，（在Debug菜單中選擇Windows--＞Script Explorer）。從Microsoft.Web.Atals.dll中動態(tài)生成的Atlas的腳本庫會作為一個以WebResource.axd?...開頭資源呈現(xiàn).一個已知的VS的bug會阻止你一開始就去打開這個文件，假如你在嘗試打開這個文件時，VS顯示出一個錯誤信息或當你雙擊這個文件名去打開這個文件時根本就沒有反應(yīng)，你可以先打開一個別的JavaScript文件，再去打開它。

　　在調(diào)試器步進到一個Asp.net頁面的代碼中前，VS不答應(yīng)你在這個頁面中的＜script＞元素中設(shè)置一個斷點。解決辦法之一是設(shè)一個斷點在方法調(diào)用處，然后步進到這個頁面的Code中來，最后調(diào)試器停在該頁的腳本代碼的一行中，這時，你就可以正常的設(shè)置斷點了，另外一種讓調(diào)試器能識別頁面中腳本的方法是在頁面文件中的一個方法中調(diào)用debug.fail()方法。當你調(diào)用這個方法時，調(diào)試器就會停止在調(diào)用debug.fail()的地方，然后，你就可以在任何其它地方設(shè)置斷點了。第三種方法是把你寫的所有腳本放在一個外部的JavaScript文件中（.js文件）。

　　VS答應(yīng)你在一個傳統(tǒng)的JavaScript函數(shù)的第一行設(shè)置一個斷點，但在“Atlas”使用的匿名方法中不行。假如匿名方法只有一行代碼，或你本來就想在第一行設(shè)斷點，這時，你可以在這個方法的第一行前插入一行空代碼，然后在第二行設(shè)斷點。

　　Firefox

　　Firefox沒有集成到VS的調(diào)試器中，所以你不能用VS調(diào)試器步進調(diào)試客戶端代碼。不過,你可以使用 Venkman 調(diào)試器, 它是Firefox的一個插件,還有另一個很有用的工具叫 Web Developer Extension, 它能讓你查看DOM和CSS 樣式.

　　Fiddler也能工作于Firefox.但是，你必須配置Firefox對于你本機８８８８端口路由HTTP請求，更多信息，請查閱 Configuring Clients right">（出處：清風軟件下載學院）

上一篇：代碼編寫中的心理學與美學

下一篇：IBM 建立商業(yè)解決方案中心