偵錯和追蹤 AJAX 應用程式概觀

發行項
10/22/2014

更新：2007 年 11 月

具備 AJAX 能力的 ASP.NET 應用程式中可混合伺服端程式碼和用戶端程式碼。瀏覽器也可以非同步地要求其他資料。這會造成具備 AJAX 能力的 Web 應用程式不易偵錯。本概觀討論一些可讓您更輕鬆偵錯程式碼的技術和工具。

注意事項：
本主題提及的程式 (Visual Studio 和 Internet Explorer 除外) 都是協力廠商工具，Microsoft 並不支援。如需授權和支援資訊，請參閱該工具的網站。

這個主題包含：

案例
背景
類別參考

案例

您可以在不同開發階段使用下列方法來偵錯具備 AJAX 能力的 ASP.NET 應用程式：

在組態檔中啟用偵錯。
在伺服器中使用追蹤。
使用 Sys.Debug 類別的方法設定中斷點和處理追蹤輸出。
在瀏覽器中啟用偵錯。
將 Visual Studio 2008 偵錯工具附加至 Internet Explorer 執行個體，或使用外部工具在其他瀏覽器中偵錯。
使用外部工具擷取 HTTP 流量。

回到頁首

背景

ASP.NET AJAX 架構提供發行和偵錯模式的模型。發行模式以最小的指令碼提供效能最佳化的錯誤檢查和例外處理。偵錯模式提供更強大的偵錯功能，例如型別和引數檢查。如果建立用戶端指令碼檔案或指令碼資源的偵錯版本，當應用程式在偵錯模式中，ASP.NET 會執行偵錯版本。這可讓您在偵錯指令碼中擲回例外狀況，但仍可產生最小的發行程式碼。

偵錯 Helper 類別 Sys.Debug 提供的方法可在網頁結尾以可閱讀的格式顯示物件。還會顯示追蹤訊息，讓您可以使用判斷提示 (Assertion) 和中斷偵錯工具。延伸的 Error 物件 API 提供有用的例外狀況詳細資料，且支援發行和偵錯模式。

下列章節提供適用於偵錯和追蹤的技術和工具的詳細資訊。

設定應用程式以進行偵錯

若要啟用偵錯，請將 compilation 項目加入至網站的根 Web.config 檔案，然後將其 debug 屬性設定為 true。如需詳細資訊，請參閱compilation 項目 (ASP.NET 設定結構描述)。

下列範例顯示 Web.config 檔案的一個區段，這個區段已設定偵錯的 debug 屬性。

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

當偵錯已啟用時，ASP.NET 會使用 Microsoft AJAX Library 的偵錯版本和自訂用戶端指令碼檔案的偵錯版本 (如果有的話)。

將應用程式從偵錯模式設定為發行模式以進行部署

當您部署具備 AJAX 能力的 ASP.NET 應用程式的發行版本時，請將應用程式設定為發行模式。這樣可確保 ASP.NET 使用的 AJAX 程式庫是效能最佳的發行版本。如果已建立自訂指令碼檔案和指令碼資源的偵錯版本和發行版本，則 ASP.NET 也會使用發行版本。若要將應用程式設定為發行模式，請執行下列步驟：

在 Web.config 檔案中，如果 compilation 項目包含 debug 屬性，請確定 debug 屬性已設定為 false。
請確定含有 ScriptManager 控制項的任何網頁已將其 ScriptMode 屬性設定為 Release。

@ Page 指示詞的 debug 屬性不會影響 ASP.NET AJAX 應用程式。ScriptManager 控制項只使用 Web.config 檔案中以及其 IsDebuggingEnabled 和 ScriptMode 屬性中的設定，來決定是否呈現偵錯指令碼。

在伺服器中追蹤

如果在伺服器中使用追蹤來偵錯已啟用網頁局部呈現的網頁，您應該使用追蹤檢視器 (Trace.axd) 顯示追蹤輸出。您可以將追蹤輸出附加至網頁的結尾，網頁第一次呈現時會顯示該追蹤輸出。不過，追蹤顯示不會隨著非同步回傳而更新，因為只有必須重新整理的 UpdatePanel 控制項內容才會變更。如需如何使用追蹤檢視器的詳細資訊，請參閱 ASP.NET 追蹤概觀。

注意事項：
如果網頁包含 ScriptManager 控制項，且其 EnablePartialRendering 屬性設定為 true，則會啟用網頁局部呈現。這個網頁也必須包含一個或多個 UpdatePanel 控制項。

偵測 Helper 類別

ASP.NET 提供 Sys.Debug 類別來偵錯用戶端應用程式。藉由呼叫 Sys.Debug 類別的方法，在網頁的結尾以可閱讀的格式顯示物件、顯示追蹤訊息、使用判斷提示以及中斷偵錯工具。

如果您使用的是 Visual Studio 和 Internet Explorer，可以將 Visual Studio 偵錯工具附加到瀏覽器並在 [輸出] 視窗中檢視偵錯工具追蹤訊息。如果您不是使用 Visual Studio，則可以在網頁中建立 textarea 項目並將其 ID 設為 TraceConsole，以在 Internet Explorer 中檢視偵錯工具追蹤訊息。在 Mozilla Firefox 中，您可以使用提供的擴充工具來檢視偵錯工具追蹤訊息。Apple Safari 和 Opera 瀏覽器會在其個別的偵錯主控台顯示追蹤訊息。

下表列出 Sys.Debug 類別的方法。

Sys.Debug.assert(condition, message, displayCaller)
檢查條件，如果條件為 false，則顯示訊息並提示使用者中斷偵錯工具。
Sys.Debug.clearTrace()
清除 TraceConsoletextarea 項目中的所有追蹤訊息。
Sys.Debug.traceDump(object, name)
將物件傾印至偵錯工具主控台和 TraceConsoletextarea 項目 (如果有的話)。
Sys.Debug.fail(message)
在偵錯工具的輸出視窗中顯示訊息，並中斷偵錯工具。
Sys.Debug.trace(text)
將文字行附加至偵錯工具主控台和 TraceConsoletextarea 項目 (如果有的話)。

下列範例顯示如何呼叫 Sys.Debug 類別的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
function btnAssert_onclick() {
    var n;
    // Insert code intended to set n to a positive integer.
    if (false) n = 3;
    // Assert if n is not greater than 0.
    Sys.Debug.assert(n > 0, "n must be set to a positive integer.");
}

function btnFail_onclick() {
    var n;
    // Insert code intended to set n to a numeric value.
    if (false) n = 3;
    // Fail if n is not numeric.
    if (isNaN(n)) Sys.Debug.fail("The value of n must be a number.");
}

function btnTrace_onclick() {
    v = form1.text1.value;
    Sys.Debug.trace("Name set to " + "\"" + v + "\".");
    alert("Hello " + v + ".");
}

function btnDump_onclick() {
    Sys.Debug.traceDump(form1.text1, "Name textbox");
    alert("Hello " + form1.text1.value + ".");
}

function btnClear_onclick() {
    Sys.Debug.clearTrace()
    alert("Trace console cleared.");
}
</script>
</head>
<body>
<form id="form1" >
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
         />
    <p><b>Use these buttons to demonstrate the assert() and fail() 
    methods:</b><br />
    <input id="btnAssert" type="button" value="Assert" 
        style="width: 100px" 
        onclick="return btnAssert_onclick()" /> &nbsp
    <input id="btnFail" type="button" value="Fail" 
        style="width: 100px" onclick="return btnFail_onclick()" />
    </p><hr />
    <b>Use the textbox and buttons below to demonstrate tracing.</b>
    <br />
    <p>Enter your name here:<br />
    <input id="text1" maxlength="50" type="text" />
    <br />
    <br />
    <input id="btnTrace" type="button" value="Trace" 
        style="width: 100px" onclick="return btnTrace_onclick()" /><br />
    <input id="btnDump" type="button" value="TraceDump" 
        style="width: 100px" onclick="return btnDump_onclick()" /><br />
    <input id="btnClear" type="button" value="ClearTrace" 
        style="width: 100px" onclick="return btnClear_onclick()" /><br />
    <br /></p>
    View output in the TraceConsole textarea below.
    <br />
    <textarea id='TraceConsole' rows="10" cols="50" 
        title="TraceConsole"></textarea>
</form>
</body>
</html>

設定 Internet Explorer 以進行偵錯

根據預設，Internet Explorer 會忽略在 JavaScript 中發現的問題。您可以使用下列程序啟用偵錯。

若要在 Internet Explorer 中啟用偵錯

按一下 [工具] 功能表上的 [網際網路選項]。
清除 [進階] 索引標籤上的 [停用指令碼偵錯 (Internet Explorer)] 核取方塊和 [停用指令碼偵錯 (其他)] 核取方塊。
選取 [每次出現指令碼錯誤時皆顯示通知] 核取方塊。
若不要顯示「易懂的」錯誤訊息，請清除 [顯示易懂的 HTTP 錯誤訊息] 核取方塊。

如果「易懂的」錯誤訊息已啟用，且來自伺服器的 HTTP 500 錯誤回應長度小於 513 位元組，Internet Explorer 會修飾內容。Internet Explorer 會顯示適合使用者的訊息，而非針對開發人員的錯誤資訊。

將 Visual Studio 偵錯工具附加至 Internet Explorer

若要偵錯用戶端指令碼，您必須將偵錯工具附加至 Internet Explorer。在 Visual Studio 中，如果您啟動應用程式進行偵錯 (按下 F5 或使用 [偵錯] 功能表中的 [開始偵錯] 命令)，自動會附加偵錯工具。

您也可以在應用程式已執行時將 Visual Studio 偵錯工具附加至 Internet Explorer。若要這樣做，請按一下 [偵錯] 功能表上的 [附加至處理序]。在 [附加至處理序] 對話方塊中，選取您要附加偵錯工具的 Internet Explorer (iexplore.exe) 執行個體。

注意事項：
如果已設定使用 Internet Explorer 進行偵錯，相關的 Internet Explorer 執行個體的 [類型] 欄會顯示 [Script, x86]。如果 [類型] 欄只顯示 [x86]，請確定已設定使用 Internet Explorer 進行偵錯。

如果 Internet Explorer 發生指令碼錯誤且設定為進行指令碼偵錯，但目前未附加至偵錯工具，瀏覽器會提示您選取偵錯工具。您可以在不進行偵錯的情況下繼續執行，也可以附加偵錯工具，然後逐步執行程式碼。

Internet Explorer 已知偵錯問題和替代解決方法

當您偵錯的 ASP.NET AJAX 應用程式使用 Internet Explorer 時，請注意下列問題和替代解決辦法：

在 Visual Studio 偵錯工具附加至 Internet Explorer 之後，您可以在 [指令碼總管] 視窗中看到正被偵錯的指令碼清單 (若要顯示這個視窗，請按一下 [偵錯] 功能表上的 [視窗]，然後按一下 [指令碼總管] )。ASP.NET AJAX 用戶端程式庫會顯示成開頭為 [ScriptResource.axd?...] 的資源，這項資源是伺服器從 ASP.NET AJAX 組件中動態產生。Visual Studio 有一個已知問題可能會讓您無法開啟檔案。如果 Visual Studio 顯示相關的錯誤訊息，或按一下檔案名稱時沒有反應，請關閉所有已開啟的指令碼檔。然後，您就可以開啟頁面，並選取您要偵錯的指令碼檔。
在偵錯工具逐步執行 ASP.NET 網頁的 JavaScript 之前，您無法在這個網頁的 script 項目內設定 JavaScript 程式碼的中斷點。若要解決這個問題，請在送出呼叫的函式設定中斷點，然後逐步執行 ASP.NET 網頁的程式碼。偵錯工具停在網頁某一行的 JavaScript 程式碼後，您就可以照常設定中斷點。讓偵錯工具辨認 ASP.NET 網頁的指令碼還有另一種方法，就是在 ASP.NET 網頁檔案中建立一個方法來呼叫 Sys.Debug.fail 方法。呼叫這個方法時，偵錯工具會停在 Sys.Debug.fail 的呼叫處，讓您可以在其他地方設定中斷點。第三種方法是將您所有的自訂程式碼放在外部 JavaScript 檔案中。
Visual Studio 可讓您在一般 JavaScript 函式的第一行設定中斷點，但不是在匿名方法的第一行，因為 ASP.NET 會在 AJAX 程式庫中使用這一行。如果匿名方法只包含一行程式碼，或您必須在匿名方法的第一行設定中斷點，請插入一行空程式碼。然後您就可以在該方法的第二行設定中斷點。

IIS 7.0 已知問題

當您在 Windows Vista 上使用 IIS 7.0 執行具備 ASP.NET AJAX 能力的網頁時，以及當 Managed 管線模式設定為「整合」時，不會快取 ScriptResourceHandler 類別所處理的指令碼。不過，當 Managed 管線模式設定為 [Classic] 時，就會快取指令碼。

如需 IIS 7.0 的 Managed 管線模式的詳細資訊，請參閱升級 ASP.NET 應用程式到 IIS 7.0：IIS 7.0 Integrated 模式與傳統模式的差異 (英文)。

擷取 HTTP 流量

在開發 Web 應用程式時，監視伺服器與用戶端之間的 HTTP 流量，通常會很有幫助。Fiddler 是一個可執行這項作業的工具，可從 MSDN 網站上的 Fiddler PowerToy 網頁中取得這個工具。Fiddler 以 Proxy 的形式執行，可以記錄所有 HTTP 流量。支援 Internet Explorer 和其他瀏覽器。您可以使用 Fiddler 檢查每一個要求和回應，包括標頭、Cookie 和訊息內容。

在 Mozilla Firefox 中偵錯

Mozilla Firefox 未與 Visual Studio 偵錯工具整合。因此，您無法使用 Visual Studio 偵錯工具來逐步執行在 Firefox 中執行的用戶端程式碼。不過，Firefox 支援某些偵錯功能，例如 JavaScript 主控台。您也可以安裝 Mozilla 提供的下列擴充部分來加強您的偵錯能力：

FireBug 可讓您逐步執行用戶端指令碼和檢查 HTML DOM 項目。也提供指令碼主控台、命令列和其他工具。
JavaScript Debugger (也稱為 "Venkman") 提供 JavaScript 偵錯環境，包含原始程式碼瀏覽器和其他功能。
Web Developer 擴充部分可讓您檢查 DOM 和 CSS 樣式。

Fiddler 也適用於 Firefox。不過，您必須設定 Firefox 透過在本機電腦的連接埠 8888 執行的 Proxy 傳送 HTTP 要求。如需詳細資訊，請參閱 Fiddler 網站中的有關＜設定用戶端＞(英文) 內容的網頁。

回到頁首

類別參考

Sys.Debug 類別
提供方法，可定義中斷點和處理追蹤輸出。

回到頁首

請參閱

工作

元件庫資源當地語系化概觀

概念

ASP.NET AJAX 概觀

加入 AJAX 和用戶端功能

共用方式為

偵錯和追蹤 AJAX 應用程式概觀

案例

背景

設定應用程式以進行偵錯

將應用程式從偵錯模式設定為發行模式以進行部署

在伺服器中追蹤

偵測 Helper 類別

設定 Internet Explorer 以進行偵錯

若要在 Internet Explorer 中啟用偵錯

將 Visual Studio 偵錯工具附加至 Internet Explorer

Internet Explorer 已知偵錯問題和替代解決方法

IIS 7.0 已知問題

擷取 HTTP 流量

在 Mozilla Firefox 中偵錯

類別參考

請參閱

工作

概念

其他資源