了解 ASP.NET AJAX 偵錯功能
偵錯程式碼的能力是一種技能，不論他們所使用的技術為何，每個開發人員都應該在其心力中擁有。 雖然許多開發人員習慣使用 Visual Studio .NET 或 Web Developer Express 來偵錯 ASP.NET 使用 VB.NET 或 C# 程式碼的應用程式，但有些開發人員也不知道它也適用于偵錯用戶端程式代碼，例如 JavaScript。 用來偵錯 .NET 應用程式的相同技術類型也可以套用至已啟用 AJAX 的應用程式，更具體來說，ASP.NET AJAX 應用程式。
ASP.NET AJAX 應用程式偵錯
Dan Wahlin
偵錯程式碼的能力是一種技能，不論他們所使用的技術為何，每個開發人員都應該在其心力中擁有。 不需說瞭解可用的不同偵錯選項，可能會節省大量的專案時間，甚至可能有些麻煩。 雖然許多開發人員習慣使用 Visual Studio .NET 或 Web Developer Express 來偵錯 ASP.NET 使用 VB.NET 或 C# 程式碼的應用程式，但有些開發人員也不知道它也適用于偵錯用戶端程式代碼，例如 JavaScript。 用來偵錯 .NET 應用程式的相同技術類型也可以套用至已啟用 AJAX 的應用程式，更具體來說，ASP.NET AJAX 應用程式。
在本文中，您將瞭解如何使用 Visual Studio 2008 和其他數個工具來偵錯 ASP.NET AJAX 應用程式，以快速找出 Bug 和其他問題。 此討論將包含使用 Visual Studio 2008 和腳本總管來逐步執行程式碼，以及使用 Web 開發協助程式等其他免費工具，啟用 Internet Explorer 6 或更新版本以進行偵錯的相關資訊。 您也將瞭解如何使用名為 Firebug 的擴充功能，在 Firefox 中偵錯 ASP.NET AJAX 應用程式，這可讓您直接在瀏覽器中逐步執行 JavaScript 程式碼，而不需要任何其他工具。 最後，您將介紹 ASP.NET AJAX 程式庫中的類別，以協助處理各種偵錯工作，例如追蹤和程式碼判斷提示語句。
嘗試在 Internet Explorer 中檢視的頁面進行偵錯之前，您需要執行一些基本步驟，才能進行偵錯。 讓我們看看一些需要執行才能開始使用的基本設定需求。
設定 Internet Explorer 以進行偵錯
大部分的人都不想看到使用 Internet Explorer 檢視的網站上遇到的 JavaScript 問題。 事實上，平均使用者甚至不知道他們看到錯誤訊息時該怎麼做。 因此，預設會在瀏覽器中關閉偵錯選項。 不過，開啟偵錯並將它放在開發新的 AJAX 應用程式時，非常簡單。
若要啟用偵錯功能，請移至 Internet Explorer 功能表上的工具網際網路選項，然後選取 [進階] 索引標籤。在 [流覽] 區段中，確定未核取下列專案：
- 停用 Internet Explorer (腳本偵錯)
- 停用腳本偵錯 (其他)
雖然並非必要，但如果您嘗試偵錯應用程式，您可能希望頁面中的任何 JavaScript 錯誤立即可見且明顯。 您可以勾選 [顯示每個腳本錯誤的相關通知] 核取方塊，強制顯示所有錯誤，並顯示訊息方塊。 雖然這是在開發應用程式時開啟的絕佳選項，但如果您只是想要閱讀其他網站，因為您遇到 JavaScript 錯誤的機會相當好，所以可能會變得很令人不滿意。
圖 1 顯示 Internet Explorer 進階對話方塊在正確設定偵錯之後應該看起來的樣子。
圖 1：設定 Internet Explorer 進行偵錯。 (按一下即可檢視完整大小的映射)
一旦開啟偵錯，您會看到新的功能表項目會出現在名為腳本偵錯工具的 [檢視] 功能表中。 它有兩個選項可供使用，包括 Open 和 Break at Next 語句。 選取 [開啟] 時，系統會提示您偵錯 Visual Studio 2008 中的頁面， (請注意，Visual Web Developer Express 也可用於偵錯) 。 如果 Visual Studio .NET 目前正在執行中，您可以選擇使用該實例或建立新的實例。 選取 [下一個語句中斷] 時，系統會提示您在執行 JavaScript 程式碼時偵錯頁面。 如果在頁面的 onLoad 事件中執行 JavaScript 程式碼，您可以重新整理頁面以觸發偵錯會話。 如果按一下按鈕之後執行 JavaScript 程式碼，偵錯工具將會在按一下按鈕之後立即執行。
注意
如果您在已啟用使用者存取控制 (U) AC 的 Windows Vista 上執行，而且您已將 Visual Studio 2008 設定為以系統管理員身分執行，則當系統提示您附加時，Visual Studio 將無法附加至進程。 若要解決此問題，請先啟動 Visual Studio，然後使用該實例進行偵錯。
雖然下一節將示範如何直接從 Visual Studio 2008 中偵錯 ASP.NET AJAX 頁面，但當頁面已經開啟且您想要更完整檢查時，使用 Internet Explorer 腳本偵錯工具選項會很有用。
使用 Visual Studio 2008 進行偵錯
Visual Studio 2008 提供偵錯功能，讓世界各地的開發人員每天依賴對 .NET 應用程式進行偵錯。 內建偵錯工具可讓您逐步執行程式碼、檢視物件資料、watch特定變數、監視呼叫堆疊加上更多功能。 除了偵錯 VB.NET 或 C# 程式碼之外，偵錯工具也有助於偵錯 ASP.NET AJAX 應用程式，並可讓您逐行執行 JavaScript 程式程式碼。 下列詳細資料著重于可用來偵錯用戶端腳本檔案的技術，而不是使用 Visual Studio 2008 對應用程式進行偵錯的整體程式提供說明。
在 Visual Studio 2008 中偵錯頁面的程式可以透過數種不同的方式啟動。 首先，您可以使用上一節所述的 Internet Explorer 腳本偵錯工具選項。 當頁面已在瀏覽器中載入，而且您想要開始偵錯時，這很適合。 或者，您可以在方案總管中以滑鼠右鍵按一下 .aspx 頁面，然後從功能表中選取 [設定為起始頁面]。 如果您習慣 ASP.NET 網頁進行偵錯，您可能之前已經這麼做。 按下 F5 之後，即可對頁面進行偵錯。 不過，雖然您通常可以在 VB.NET 或 C# 程式碼的任何位置設定中斷點，但這不一定是 JavaScript 的案例，如您接下來所見。
內嵌與外部腳本
Visual Studio 2008 偵錯工具會將內嵌在不同于外部 JavaScript 檔案的頁面中處理 JavaScript。 透過外部腳本檔案，您可以開啟檔案，並在您選擇的任何一行上設定中斷點。 您可以按一下程式碼編輯器視窗左邊的灰色匣區域來設定中斷點。 當 JavaScript 直接內嵌至使用 標籤的頁面時 <script> ，按一下灰色匣區域來設定中斷點不是選項。 嘗試在內嵌腳本行上設定中斷點會導致警告指出「這不是中斷點的有效位置」。
您可以將程式碼移至外部.js檔案，並使用腳本 > 標籤的 < src 屬性來參考此問題：
<script type="text/javascript" src="Scripts/YourScript.js"></script>
如果將程式碼移至外部檔案不是選項，或需要比其價值更多的工作，該怎麼辦？ 雖然您無法使用編輯器設定中斷點，但您可以將偵錯工具語句直接新增至您想要開始偵錯的程式碼。 您也可以使用 ASP.NET AJAX 程式庫中提供的 Sys.Debug 類別，強制偵錯啟動。 您將在本文稍後深入瞭解 Sys.Debug 類別。
使用 關鍵字的 debugger 範例會顯示在清單 1 中。 本範例會在呼叫更新函式之前強制偵錯工具中斷。
清單 1. 使用偵錯工具關鍵字強制 Visual Studio .NET 偵錯工具中斷。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
debugger;
UpdatePerson(person);
}
叫用偵錯工具語句之後，系統會提示您使用 Visual Studio .NET 對頁面進行偵錯，並開始逐步執行程式碼。 執行此動作時，您可能會遇到存取頁面中使用的 ASP.NET AJAX 程式庫腳本檔案的問題，讓我們看看使用 Visual Studio 。NET 的腳本總管。
使用 Visual Studio .NET Windows 進行偵錯
一旦啟動偵錯會話並開始使用預設 F11 機碼逐步執行程式碼之後，除非頁面中使用的所有腳本檔案都已開啟且可供偵錯，否則可能會遇到如圖 2 所示的錯誤對話方塊。
圖 2：沒有原始程式碼可供偵錯時顯示的錯誤對話方塊。 (按一下即可檢視完整大小的映射)
此對話方塊隨即顯示，因為 Visual Studio .NET 不確定如何取得頁面所參考之部分腳本的原始程式碼。 雖然這一開始可能會相當令人沮喪，但有簡單的修正。 啟動偵錯會話並叫用中斷點之後，請移至 Visual Studio 2008 功能表上的 [偵錯 Windows 腳本總管] 視窗，或使用 Ctrl+Alt+N 熱鍵。
注意
如果您看不到列出的 [腳本總管] 功能表，請移至 Visual Studio .NET 功能表上的 [工具>自訂>命令]。 在 [類別] 區段中找出 [ 偵 錯] 專案，然後按一下它以顯示所有可用的功能表項目。 在 [命令] 清單中，向下捲動至 [腳本總管]，然後將它向上拖曳至稍早所述的 [偵錯 Windows] 功能表。 如此一來，每次執行 Visual Studio .NET 時，即可使用 [腳本總管] 功能表項目。
腳本總管可用來檢視頁面中使用的所有腳本，並在程式碼編輯器中加以開啟。 開啟腳本總管之後，按兩下目前正在偵錯的 .aspx 頁面，在程式碼編輯器視窗中開啟它。 針對腳本總管中顯示的所有其他腳本執行相同的動作。 在程式碼視窗中開啟所有腳本後，您可以按 F11 (，並使用其他偵錯熱鍵) 逐步執行程式碼。 圖 3 顯示腳本總管的範例。 它會列出目前正在偵錯的檔案， (Demo.aspx) ，以及兩個自訂腳本，以及兩個由 ASP.NET AJAX ScriptManager 動態插入頁面的腳本。
圖 3. 腳本總管可讓您輕鬆存取頁面中使用的腳本。 (按一下即可檢視完整大小的映射)
當您逐步執行頁面中的程式碼時，也可以使用其他數個視窗來提供有用的資訊。 例如，您可以使用 [區域變數] 視窗來查看頁面中使用的不同變數值、[即時運算] 視窗來評估特定變數或條件，並檢視輸出。 您也可以使用 [輸出] 視窗來檢視使用 Sys.Debug.trace 函式所寫出的追蹤語句， (本文稍後將涵蓋此函式) 或 Internet Explorer 的 Debug.writeln 函式。
當您使用偵錯工具逐步執行程式碼時，您可以在程式碼中將變數停留在上方，以檢視指派的值。 不過，腳本偵錯工具偶爾不會在您滑鼠停留在指定的 JavaScript 變數上時顯示任何專案。 若要查看值，請反白顯示您嘗試在程式碼編輯器視窗中看到的語句或變數，然後將它停留在上方。 雖然這項技術在每次情況下都無法運作，但在許多情況下，您都可以看到值，而不需要查看不同的偵錯視窗，例如 [區域變數] 視窗。
您可以在 檢 http://www.xmlforasp.net 視示範這裡討論之一些功能的影片教學課程。
使用 Web 開發協助程式進行偵錯
雖然 Visual Studio 2008 (和 Visual Web Developer Express 2008) 功能非常強大的偵錯工具，但還有其他選項可用來更輕量。 要發行的最新工具之一是 Web 開發協助程式。 Microsoft 的 Nikhil Kothari (Microsoft) AJAX 架構設計人員的其中一個主要 ASP.NET 撰寫這個絕佳的工具，其可執行許多不同的工作，從簡單的偵錯到檢視 HTTP 要求和回應訊息。
Web 開發協助程式可以直接在 Internet Explorer 內使用，方便使用。 首先，從 Internet Explorer 功能表中選取 [工具][Web 開發協助程式]。 這會在瀏覽器底部開啟工具，因為您不需要離開瀏覽器來執行數項工作，例如 HTTP 要求和回應訊息記錄。 圖 4 顯示 Web 開發協助程式的運作方式。
圖 4：Web 開發協助程式 (按一下以檢視完整大小的影像)
Web 開發協助程式不是您將用來逐行執行程式碼的工具，如同 Visual Studio 2008 一樣。 不過，它可以用來檢視追蹤輸出、輕鬆地評估腳本中的變數，或探索資料位於 JSON 物件內部。 它也適用于檢視傳入和傳回 ASP.NET AJAX 頁面和伺服器的資料。
在 Internet Explorer 中開啟 Web 開發協助程式之後，您必須從 [Web 開發協助程式] 功能表中選取 [腳本啟用腳本偵錯]，以啟用腳本偵錯，如圖 4 稍早所示。 這可讓工具攔截執行頁面時發生的錯誤。 它也可讓您輕鬆存取在頁面中輸出的訊息。 若要檢視追蹤資訊或執行指令碼命令以測試頁面內的不同函式，請從 [Web 開發協助程式] 功能表選取 [腳本顯示腳本主控台]。 這可讓您存取命令視窗和簡單的即時視窗。
檢視追蹤訊息和 JSON 物件資料
即時運算視窗可用來執行指令碼命令，甚至載入或儲存用來測試頁面中不同函式的腳本。 命令視窗會顯示所檢視頁面所寫出的追蹤或偵錯訊息。 清單 2 示範如何使用 Internet Explorer 的 Debug.writeln 函式來撰寫追蹤訊息。
清單 2. 使用 Debug 類別寫出用戶端追蹤訊息。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
Debug.writeln("Person name: " + person.LastName);
UpdatePerson(person);
}
如果 LastName 屬性包含 Doe 的值，Web 開發協助程式會在腳本主控台的命令視窗中顯示「人員名稱：Doe」訊息， (假設偵錯已啟用) 。 Web 開發協助程式也會將最上層 debugService 物件新增至頁面，可用來寫出追蹤資訊或檢視 JSON 物件的內容。 清單 3 顯示使用 debugService 類別追蹤函式的範例。
清單 3. 使用 Web 開發協助程式的 debugService 類別來撰寫追蹤訊息。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.trace("Person name: " + person.LastName);
}
UpdatePerson(person);
}
debugService 類別的一個好功能是即使 Internet Explorer 中未啟用偵錯，也能讓 Web 開發協助程式在執行時輕鬆存取追蹤資料。 當工具未用來偵錯頁面時，將會忽略追蹤語句，因為對 window.debugService 的呼叫會傳回 false。
debugService 類別也允許使用 Web 開發協助程式的偵測器視窗來檢視 JSON 物件資料。 清單 4 會建立包含人員資料的簡單 JSON 物件。 建立物件之後，會呼叫 debugService 類別的檢查函式，以允許以視覺化方式檢查 JSON 物件。
清單 4. 使用 debugService.inspect 函式來檢視 JSON 物件資料。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.inspect("Person Object",person);
}
UpdatePerson(person);
}
在頁面或透過即時視窗呼叫 GetPerson () 函式會導致 [物件偵測器] 對話方塊視窗出現，如圖 5 所示。 您可以藉由反白顯示物件中的屬性、變更 [值] 文字方塊中顯示的值，然後按一下 [更新] 連結，以動態方式變更物件中的屬性。 使用物件偵測器可讓您直接檢視 JSON 物件資料，並實驗將不同的值套用至屬性。
偵錯錯誤
除了允許顯示追蹤資料和 JSON 物件之外，Web 開發協助程式也可以協助偵錯頁面中的錯誤。 如果發生錯誤，系統會提示您繼續下一行程式碼或偵錯腳本， (請參閱圖 6) 。 [腳本錯誤] 對話方塊視窗會顯示完整的呼叫堆疊和行號，讓您可以輕鬆地識別腳本內的問題所在位置。
![使用 [物件偵測器] 視窗來檢視 JSON 物件。](understanding-asp-net-ajax-debugging-capabilities/_static/image13.png)
圖 5：使用 [物件偵測器] 視窗來檢視 JSON 物件。 (按一下即可檢視完整大小的影像)
選取偵錯選項可讓您直接在 Web 開發協助程式的即時視窗中執行腳本語句，以檢視變數的值、寫出 JSON 物件等等。 如果再次執行觸發錯誤的相同動作，且電腦上有 Visual Studio 2008 可用，系統會提示您啟動偵錯會話，以便您可以依照上一節所述逐行逐步執行程式程式碼。
圖 6：Web 開發協助程式的 [腳本錯誤] 對話方塊 (按一下即可檢視完整大小的影像)
檢查要求和回應訊息
偵錯 ASP.NET AJAX 頁面時，查看頁面與伺服器之間傳送的要求和回應訊息通常很有用。 檢視訊息內的內容，可讓您查看是否已傳遞適當的資料以及訊息的大小。 Web 開發協助程式提供絕佳的 HTTP 訊息記錄器功能，可讓您輕鬆地以原始文字或更容易閱讀的格式檢視資料。
若要檢視 ASP.NET AJAX 要求和回應訊息，您必須從 [Web 開發協助程式] 功能表中選取 [HTTP 啟用 HTTP 記錄] 來啟用 HTTP 記錄器。 啟用之後，從目前頁面傳送的所有訊息都可以在 HTTP 記錄檢視器中檢視，其可藉由選取 [HTTP 顯示 HTTP 記錄檔] 來存取。
雖然檢視每個要求/回應訊息中所傳送的原始文字，在 網頁程式開發協助程式) 中，檢視每個要求/回應訊息中的原始文字當然 (很有用，但通常更容易以更圖形化的格式檢視訊息資料。 啟用 HTTP 記錄並記錄訊息之後，即可按兩下 HTTP 記錄檢視器中的訊息來檢視訊息資料。 這樣做可讓您檢視與訊息以及實際訊息內容相關聯的所有標頭。 圖 7 顯示 HTTP 記錄檢視器視窗中檢視的要求訊息和回應訊息範例。
圖 7：使用 HTTP 記錄檢視器來檢視要求和回應訊息資料。 (按一下即可檢視完整大小的影像)
HTTP 記錄檢視器會自動剖析 JSON 物件，並使用樹狀檢視來顯示它們，讓檢視物件的屬性資料變得快速又容易。 當 UpdatePanel 用於 ASP.NET AJAX 頁面中時，檢視器會將訊息的每個部分分成個別部分，如圖 8 所示。 這是一項絕佳的功能，相較于檢視原始訊息資料，可讓您更輕鬆地查看和瞭解訊息中的內容。
圖 8：使用 HTTP 記錄檢視器檢視的 UpdatePanel 回應訊息。 (按一下即可檢視完整大小的影像)
除了 Web 開發協助程式之外，還有數個其他工具可用來檢視要求和回應訊息。 另一個好選項是 Fiddler，可在 免費取得 http://www.fiddlertool.com 。 雖然此處不會討論 Fiddler，但當您需要徹底檢查訊息標頭和資料時，這也是不錯的選擇。
使用 Firefox 和 Firebug 進行偵錯
雖然 Internet Explorer 仍然是最廣泛使用的瀏覽器，但 Firefox 等其他瀏覽器已變得相當熱門，而且正在使用更多。 因此，您會想要在 Firefox 和 Internet Explorer 中檢視和偵錯 ASP.NET AJAX 頁面，以確保您的應用程式正常運作。 雖然 Firefox 無法直接系結至 Visual Studio 2008 以進行偵錯，但它具有稱為 Firebug 的擴充功能，可用來偵錯頁面。 您可以前往 http://www.getfirebug.com 免費下載 Firebug。
Firebug 提供功能完整的偵錯環境，可用來逐行逐步執行程式程式碼、存取頁面內使用的所有腳本、檢視 DOM 結構、顯示 CSS 樣式，甚至追蹤頁面上發生的事件。 安裝之後，即可從 Firefox 功能表選取 [工具 Firebug Open Firebug] 來存取 Firebug。 如同 Web 開發協助程式，Firebug 會直接在瀏覽器中使用，雖然它也可以當做獨立應用程式使用。
一旦 Firebug 正在執行，不論腳本是否內嵌在頁面中，都可以在 JavaScript 檔案的任何一行上設定中斷點。 若要設定中斷點，請先載入您想要在 Firefox 中偵錯的適當頁面。 載入頁面之後，請從 Firebug 的 [腳本] 下拉式清單中選取要偵錯的腳本。 頁面所使用的所有腳本都會顯示。 中斷點是藉由按一下 Visual Studio 2008 中應該執行的行上的 Firebug 灰色匣區域來設定中斷點。
在 Firebug 中設定中斷點之後，您可以執行執行需要偵錯的腳本所需的動作，例如按一下按鈕或重新整理瀏覽器以觸發 onLoad 事件。 執行會在包含中斷點的行上自動停止。 圖 9 顯示已在 Firebug 中觸發的中斷點範例。
圖 9：處理 Firebug 中的中斷點。 (按一下即可檢視完整大小的影像)
叫用中斷點之後，您可以使用箭號按鈕逐步執行或跳出程式碼。 當您逐步執行程式碼時，腳本變數會顯示在偵錯工具的右側部分，讓您查看值並向下切入物件。 Firebug 也包含 [呼叫堆疊] 下拉式清單，可檢視腳本的執行步驟，導致偵錯目前行。
Firebug 也包含主控台視窗，可用來測試不同的腳本語句、評估變數和檢視追蹤輸出。 按一下 Firebug 視窗頂端的 [主控台] 索引標籤，即可存取它。 偵錯的頁面也可以「檢查」，按一下 [檢查] 索引標籤來查看其 DOM 結構和內容。當您將滑鼠停留在偵測器視窗中顯示的不同 DOM 元素時，頁面的適當部分將會反白顯示，讓您輕鬆查看元素在頁面中的位置。 與指定專案相關聯的屬性值可以變更為「即時」，以實驗套用不同的寬度、樣式等。至 專案。 這是一項不錯的功能，可讓您不必在原始程式碼編輯器與 Firefox 瀏覽器之間持續切換，以檢視簡單變更對頁面的影響。
圖 10 顯示使用 DOM 偵測器在頁面中尋找名為 txtCountry 的文字方塊的範例。 Firebug 偵測器也可以用來檢視頁面中使用的 CSS 樣式，以及追蹤滑鼠移動、按鈕點選等事件。
圖 10：使用 Firebug 的 DOM 偵測器。 (按一下即可檢視完整大小的映射)
Firebug 提供輕量的方式，可直接在 Firefox 中對頁面進行偵錯，以及用來檢查頁面內不同元素的絕佳工具。
ASP.NET AJAX 中的偵錯支援
ASP.NET AJAX 程式庫包含許多不同的類別，可用來簡化將 AJAX 功能新增至網頁的程式。 您可以使用這些類別來找出頁面內的元素，並加以操作、新增控制項、呼叫 Web 服務，甚至處理事件。 ASP.NET AJAX 程式庫也包含可用來增強偵錯頁面程式的類別。 在本節中，您將介紹 Sys.Debug 類別，並查看如何在應用程式中使用它。
使用 Sys.Debug 類別
Sys.Debug 類別 (位於 Sys 命名空間中的 JavaScript 類別) 可用來執行數個不同的函式，包括撰寫追蹤輸出、執行程式碼判斷提示並強制程式碼失敗，以便偵錯。 它廣泛用於 ASP.NET AJAX 程式庫的偵錯檔案， (安裝在 C：\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary \System.Web.Extensions\1.0.61025.0 預設會) 執行條件式測試， (稱為判斷提示) 確保參數正確傳遞至函式、該物件包含預期的資料和寫入追蹤語句。
Sys.Debug 類別會公開數個不同的函式，可用來處理追蹤、程式碼判斷提示或失敗，如表 1 所示。
表 1. Sys.Debug 類別函式。
| 函數名稱 | 說明 |
|---|---|
| assert (條件、訊息、displayCaller) | 判斷提示條件參數為 true。 如果測試的條件為 false，則會使用訊息方塊來顯示訊息參數值。 如果 displayCaller 參數為 true，方法也會顯示呼叫端的相關資訊。 |
| clearTrace () | 清除追蹤作業的語句輸出。 |
| 失敗 (訊息) | 讓程式停止執行，並中斷偵錯工具。 訊息參數可用來提供失敗的原因。 |
| 追蹤 (訊息) | 將訊息參數寫入追蹤輸出。 |
| traceDump (物件，名稱) | 以可讀取的格式輸出物件的資料。 name 參數可用來提供追蹤傾印的標籤。 預設會寫出要傾印之物件內的任何子物件。 |
用戶端追蹤與 ASP.NET 中可用的追蹤功能大致相同。 它可讓您輕鬆地看到不同的訊息，而不會中斷應用程式的流程。 清單 5 顯示使用 Sys.Debug.trace 函式寫入追蹤記錄檔的範例。 此函式只會接受應該寫出為參數的訊息。
清單 5. 使用 Sys.Debug.trace 函式。
function BuildPerson()
{
var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
UpdatePerson(person);
}
如果您執行清單 5 中顯示的程式碼，就不會在頁面中看到任何追蹤輸出。 唯一的查看方法是使用 Visual Studio .NET、Web 開發協助程式或 Firebug 中可用的主控台視窗。 如果您想要在頁面中看到追蹤輸出，則必須新增 TextArea 標籤，並提供 TraceConsole 的識別碼，如下所示：
<textArea id="TraceConsole" rows="10" cols="50"></textArea>
頁面上的任何 Sys.Debug.trace 語句都會寫入 TraceConsole TextArea。
如果您想要查看 JSON 物件中包含的資料，您可以使用 Sys.Debug 類別的 traceDump 函式。 此函式採用兩個參數，包括應該傾印至追蹤主控台的物件，以及可用來識別追蹤輸出中物件的名稱。 清單 6 顯示使用 traceDump 函式的範例。
清單 6. 使用 Sys.Debug.traceDump 函式。
function UpdatePerson(person)
{
//Dump contents of the person object to the trace output
Sys.Debug.traceDump(person,"Person Data");
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
圖 11 顯示呼叫 Sys.Debug.traceDump 函式的輸出。 請注意，除了寫出 Person 物件的資料之外，也會寫出 Address 子物件的資料。
除了追蹤之外，Sys.Debug 類別也可用來執行程式碼判斷提示。 判斷提示可用來測試應用程式執行時是否符合特定條件。 ASP.NET AJAX 程式庫腳本的偵錯版本包含數個判斷提示語句，以測試各種條件。
清單 7 顯示使用 Sys.Debug.assert 函式來測試條件的範例。 程式碼會先測試 Address 物件是否為 Null，再更新 Person 物件。
圖 11：Sys.Debug.traceDump 函式的輸出。 (按一下即可檢視完整大小的映射)
清單 7. 使用 debug.assert 函式。
function UpdatePerson(person)
{
//Check if address is null
Sys.Debug.assert(person.get_address() == null,"Address is null!",true);
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
會傳遞三個參數，包括要評估的條件、判斷提示傳回 false 以及是否應該顯示呼叫端相關資訊的訊息。 如果判斷提示失敗，如果第三個參數為 true，則會顯示訊息以及呼叫端資訊。 圖 12 顯示失敗對話方塊的範例，如果清單 7 所示的判斷提示失敗，就會顯示此對話方塊。
要涵蓋的最後一個函式是 Sys.Debug.fail。 當您想要強制程式碼在腳本中的特定行上失敗時，您可以新增 Sys.Debug.fail 呼叫，而不是通常用於 JavaScript 應用程式中的偵錯工具語句。 Sys.Debug.fail 函式接受代表失敗原因的單一字串參數，如下所示：
Sys.Debug.fail("My forced failure of script.");
圖 12：Sys.Debug.assert 失敗訊息。 (按一下即可檢視完整大小的映射)
在執行腳本時遇到 Sys.Debug.fail 語句時，訊息參數的值會顯示在偵錯應用程式的主控台中，例如 Visual Studio 2008，系統會提示您偵錯應用程式。 其中一種情況相當實用，就是當您無法在內嵌腳本上使用 Visual Studio 2008 設定中斷點，但希望程式碼在特定行停止，以便檢查變數的值時。
瞭解 ScriptManager 控制項的 ScriptMode 屬性
ASP.NET AJAX 程式庫包含安裝在 C：\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 的偵錯和發行腳本版本。 偵錯腳本的格式正確、容易讀取，而且有數個散佈于其中 Sys.Debug.assert 呼叫，而發行腳本會略過空白字元，並謹慎地使用 Sys.Debug 類別，以最小化其整體大小。
新增至 ASP.NET AJAX 頁面的 ScriptManager 控制項會讀取編譯專案的偵錯屬性，web.config，以判斷要載入的程式庫腳本版本。 不過，您可以藉由變更 ScriptMode 屬性，來控制偵錯或發行腳本是否已載入 (程式庫腳本或您自己的自訂) 腳本。 ScriptMode 接受 ScriptMode 列舉，其成員包括 Auto、Debug、Release 和 Inherit。
ScriptMode 預設為 Auto 值，這表示 ScriptManager 會在 web.config中檢查偵錯屬性。當 debug 為 false 時，ScriptManager 會載入 ASP.NET AJAX 程式庫腳本的版本。 當偵錯為 true 時，將會載入腳本的偵錯版本。 將 ScriptMode 屬性變更為 Release 或 Debug 會強制 ScriptManager 載入適當的腳本，而不論偵錯屬性在 web.config 中的值為何。清單 8 顯示使用 ScriptManager 控制項從 AJAX 程式庫載入偵 ASP.NET 錯腳本的範例。
清單 8. 使用 ScriptManager 載入偵錯腳本.
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>
您也可以使用 ScriptManager 的 Scripts 屬性以及 ScriptReference 元件，載入不同的版本 (偵錯或發行自己的自訂腳本) ，如清單 9 所示。
清單 9. 使用 ScriptManager 載入自訂腳本。
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
</Scripts>
</asp:ScriptManager>
注意
如果您使用 ScriptReference 元件載入自訂腳本，則必須在腳本底部新增下列程式碼，以在腳本完成載入時通知 ScriptManager：
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
清單 9 中顯示的程式碼會告訴 ScriptManager 尋找 Person 腳本的偵錯版本，使其會自動尋找Person.debug.js，而不是Person.js。 如果找不到Person.debug.js檔案，將會引發錯誤。
如果您想要根據 ScriptManager 控制項上設定的 ScriptMode 屬性值載入自訂腳本的偵錯或發行版本本，您可以將 ScriptReference 控制項的 ScriptMode 屬性設定為 Inherit。 這會導致根據 ScriptManager 的 ScriptMode 屬性載入適當的自訂腳本版本，如清單 10 所示。 由於 ScriptManager 控制項的 ScriptMode 屬性設定為 [偵錯]，所以Person.debug.js腳本將會載入並用於頁面。
清單 10。 從自訂腳本的 ScriptManager 繼承 ScriptMode。
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
</Scripts>
</asp:ScriptManager>
藉由適當地使用 ScriptMode 屬性，您可以更輕鬆地偵錯應用程式並簡化整體程式。 ASP.NET AJAX 程式庫的版本腳本較難以逐步執行和讀取，因為偵錯腳本已針對偵錯目的特別格式化程式碼格式。
結論
Microsoft 的 ASP.NET AJAX 技術提供穩固的基礎，可建置已啟用 AJAX 的應用程式，以增強使用者的整體體驗。 不過，如同任何程式設計技術，Bug 和其他應用程式問題一定會發生。 瞭解可用的不同偵錯選項可以節省許多時間，並產生更穩定的產品。
在本文中，您已介紹數種不同的技術來偵錯 ASP.NET AJAX 頁面，包括使用 Visual Studio 2008、Web Development Helper 和 Firebug 的 Internet Explorer。 這些工具可以簡化整體偵錯程式，因為您可以存取變數資料、逐行逐步解說程式碼，以及檢視追蹤語句。 除了討論的不同偵錯工具之外，您也瞭解如何在應用程式中使用 ASP.NET AJAX 程式庫的 Sys.Debug 類別，以及如何使用 ScriptManager 類別來載入偵錯或發行腳本版本。
簡歷
Dan Wahlin (適用于 ASP.NET 和 XML Web Services 的 Microsoft 最有價值專業) 是介面技術訓練 (www.interfacett.com) 的 .NET 開發講師和架構顧問。 Dan 為 ASP.NET 開發人員網站 (www.XMLforASP.NET) 建立 XML，位於 INETA 演講者局，並在數個會議中演講。 Dan 共同撰寫的 Professional Windows DNA (Wrox) 、ASP.NET：秘訣、教學課程和程式碼 (Sams) 、ASP.NET 1.1 Insider Solutions、Professional ASP.NET 2.0 AJAX (Wrox) 、ASP.NET 2.0 MVP Hacks，以及針對 ASP.NET 開發人員 (Sams) 撰寫的 XML。 當他未撰寫程式碼、文章或書籍時，Dan 會喜歡撰寫和錄製音樂，並利用他的朋友和兒童玩運動和籃球。
Scott Cate 自 1997 年以來一直與 Microsoft Web 技術合作，而且是 myKB.com (www.myKB.com) ，他專門撰寫著重于知識庫軟體解決方案的 ASP.NET 型應用程式。 Scott 可以透過電子郵件 scott.cate@myKB.com 或其部落格連絡，網址為 ScottCate.com
意見反應
即將登場：在 2024 年，我們將逐步淘汰 GitHub 問題作為內容的意見反應機制，並將它取代為新的意見反應系統。 如需詳細資訊，請參閱：https://aka.ms/ContentUserFeedback。
提交並檢視相關的意見反應