http://msdn.microsoft.com/zh-cn/dd567278.aspx
第2 章 伺服器控制項開發中的調試技術
作者：鄭健
本章內容
2.1 預置程式碼範例
2.2 調試頁面服務端代碼
2.3 伺服器控制項的調試
2.4 JavaScript 指令碼調試方法
2.5 Ajax Library 對JavaScript調試支援
2.1 預置程式碼範例
熟悉ASP.NET 開發的讀者朋友可能對於伺服器控制項的調試技術更容易上手，不過如果您剛剛接觸ASP.NET 也沒關係，本章會從最基本的調試開始講解。
在調試之前，要先建立一個調試控制項的項目環境。關於如何建立環境在這裡就不講了，第1 章已經講得非常詳細了。
首先在Web 控制項項目工程中添加一個主控制項代碼檔案DebugControl.cs ，下面是本章範例程式碼控制項主檔案DebugControl.cs 的代碼：
- [ToolboxData("<{0}:DebugControl runat=server></{0}:DebugControl>")]
- /// <summary>
- /// 獲得本書更多內容,請看:
- /// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
- /// </summary>
- public class DebugControl : WebControl
- {
- Button btnDebugScript = new Button();
- protected override void CreateChildControls()
- {
- this.Controls.Add(btnDebugScript);
- base.CreateChildControls();
- }
- protected override void Render(HtmlTextWriter writer)
- {
- btnDebugScript.Text = "調試用戶端指令碼";
- btnDebugScript.OnClientClick = "ClientClickEvent();";
- btnDebugScript.RenderControl(writer);
- }
- }
代碼很簡單，主要是產生一個按鈕，並為按鈕註冊一個用戶端單擊事件ClientClickEvent。CreateChildControls和Render都是自訂控制項生命週期階段依次執行的一些方法，在第1章講解控制項生命週期時已經介紹過，在下一章還會更詳細地講解它們。本章主要關注控制項調試技術部分。
另外，在網站的分頁檔DebugControl.aspx的<head></head>標記中加入控制項用戶端事件執行的方法的實現代碼：
- <head runat="server">
- <script language="javascript">
- function ClientClickEvent()
- {
- alert('我被單擊了一下!');
- }
- </script>
- </head>
用戶端ClientClickEvent方法體就一句話，彈出一個提示。在瀏覽器中查看DebugControl.aspx頁面。並單擊頁面中的按鈕，運行效果會2-1所示。
圖2-1 控制項運行圖
這個範例程式碼非常簡單，但已經能夠展示所有控制項開發調試的內容了。到現在為止已經完成了第一步，下面開始一一介紹控制項開發相關的調試內容。
2.2 調試頁面服務端代碼在講解如何調試伺服器控制項之前，首先講解一下最基本的頁面服務端代碼調試方法。在DebugControl.aspx.cs頁面後台代碼的Page_Load事件中加一行代碼，添加後Page_Load事件代碼如下所示：
- /// <summary>
- /// 獲得本書更多內容,請看:
- /// http://blog.csdn.net/ChengKing/archive/2008/08/18/2792440.aspx
- /// </summary>
- protected void Page_Load(object sender, EventArgs e)
- {
- Response.Write("學習伺服器控制項調試技術");
- }
將游標移到 Response.Write() 方法所在的行，按F9鍵設定斷點，設好斷點後的效果2-2所示。
圖2-2 設定斷點後的效果
如果要取消當前斷點，可以再按一次F9鍵。按Shift F9按鍵組合將取消所有設定的斷點。
把DebugControl.aspx設為起始頁，並把DebugControl.aspx所在的網站設為啟動項目。按F5鍵啟動項目，頁面運行後會自動在設定的斷點處中斷，圖2-3所示為運行到斷點，程式自動中斷的效果。
圖2-3 運行到斷點自動中斷
當運行中的程式中斷後，就可以在此查看當前應用程式各個對象的狀態。
2.3 伺服器控制項的調試2.3.1 運行模式下的調試方法
在運行模式下的調試方法與在普通頁面中調試類似，直接在控制項代碼中按 F9設定斷點即可。在控制項Render方法中設定斷點後，介面2-4所示。
圖2-4 控制項中設定斷點
按F5鍵運行程式，程式運行到此會自動中斷。
2.3.2 設計模式下的調試方法
運行模式是指控制項在瀏覽器中運行呈現的效果時需要啟動並執行代碼。設計模式是指控制項在頁面設計器中呈現時啟動並執行代碼。在資源管理員中右擊一個*.aspx分頁檔，選擇"查看設計器"命令，即可進入到控制項的設計模式。
設計一個好的控制項不能僅考慮其在運行模式下具有漂亮的展現外觀和較強的功能，也應該注重其在設計模式下的效果。
設計模式主要是為控制項使用者設計的（不是瀏覽網站的終端使用者），此模式能夠讓控制項使用者在設計器中就能夠看到控制項的展現效果，更便捷地配置控制項的屬性和行為。設計模式與運行模式一樣，在呈現控制項時都是在當前環境下產生控制項執行個體呈現的。當然，它們還是有區別的，設計模式較運行模式除了在控制項生命週期階段有些事件不執行外，也不能夠訪問一些在僅運行模式下才具有的上下文環境變數等。
ASP.NET為設計模式增加了很多功能，關於設計模式編程後面會有更詳細的樣本進行講解，這裡僅瞭解概念即可。
既然在設計模式下編程是非常有必要的，那麼我們也要學會在設計模式下對控制項進行調試。下面就講對幾種控制項在設計模式下的調試方法。
方法一
開啟要進行調試的自訂控制項項目，右擊項目名稱，選擇"屬性"開啟屬性頁面。
選擇左邊的"調試"選項卡，再選擇"啟動外部程式"條目下的"啟動外部程式"，並設定路徑為devenv.exe的全路徑（安裝路徑/Visual Studio 8/Common7/IDE/devenv.exe），設定好後2-5所示。
右擊自訂控制項項目，選擇"設為啟動項目"。這樣運行時就不會啟動網站下面的頁面，而啟動本項目。
在自訂控制項中設定好斷點，參考圖2-4。
按F5鍵運行，啟動項目，則會開啟一個新的IDE環境（設定的效果）。
在新的IDE中開啟上面建立的網站，找到DebugControl.aspx頁面，選擇右鍵菜單中的"查看設計器"命令，則控制項會呈現在設計模式下，並在設定的斷點處中斷。在設計器中修改控制項的任意屬性值也會使運行中的程式在斷點處中斷。
圖2-5 設定啟動外部程式
方法二
用一個IDE開啟要進行調試的控制項項目（命名這個IDE為IDE_1），用另一個IDE開啟網站工程（命名這個IDE為IDE_2），或者用兩個IDE把分別把兩個解決方案開啟。
在IDE_1中，依次選擇"調試"→"附加到進程"命令，2-6所示。
執行 中的命令後，會彈出"附加到進程"對話方塊，在最下面"可用進程"列表中選中進程devenv.exe，devenv.exe是運行環境IDE_2程式標誌的進程。單擊"附加"按鈕，2-7所示。
圖2-6 "附加到進程"命令菜單
圖2-7 "附加到進程"對話方塊
在IDE_1開啟的控制項工程中找到主控制項檔案，設定好斷點，2-4所示。
在IDE_2中找到網站中的DebugControl.aspx，選擇右鍵菜單中的"查看設計器"命令，並在設計器中修改控制項的屬性。程式在遇到斷點時則會中斷。
以上兩種調試控制項的方法，原理相似，只是操作方式有些不同。根據自己的使用習慣選擇一種即可。
2.4 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在頁面上沒有定義，則系統會自動彈出調試器視窗，您可在此視窗選擇調試器並開始調試。
2.5 本章總結本章主要介紹了開發ASP.NET伺服器控制項時所需的調試技術：用戶端指令碼調試方法（JavaScript指令碼調試方法），服務端控制項調試方法（運行模式和設計模式）。針對同一個調試功能講解了多種調試方法，您可以自己選擇較喜愛的方案。
另外，.NET調試技術的內容可以專門用一本書來講解。本章只講解了控制項開發部分常用到的調試技術，關於更多調試技術可以查看相關書籍。
到現在為止，第1章已經講解了項目開發環境配置，這一章又講了控制項開發最基本的技術 -- -- 調試。從下一章開始將詳細講解控制項開發技術。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
