逐步解說：在 Visual Web Developer 中進行 Web 網頁偵錯

發行項
08/21/2008

更新：2007 年 11 月

Visual Web Developer 為您提供追蹤 ASP.NET Web 網頁中錯誤的工具。在這個逐步解說中，您將使用偵錯工具逐步執行網頁的每一行程式碼，並檢查變數的值。

在逐步解說中，您將建立包含計算數值平方之簡單計算機的 Web 網頁。建立網頁 (其中會包含蓄意錯誤) 之後，您將使用偵錯工具檢查執行中的網頁。

逐步解說將說明的工作包括：

設定中斷點。
從檔案系統網站中的 Web Form 網頁叫用 (Invoke) 偵錯工具。

必要條件

若要完成這個逐步解說，您必須要有：

Visual Web Developer 和 .NET Framework。

您還應該對 Visual Web Developer 中的工作具有一般瞭解。如需 Visual Web Developer 的簡介，請參閱逐步解說：在 Visual Web Developer 中建立基本 Web 網頁。

建立網站和網頁

在逐步解說的第一部分中，您將建立可以進行偵錯的網頁。

如果您已在 Visual Web Developer 中建立了網站 (例如，藉由使用主題逐步解說：在 Visual Web Developer 中建立基本 Web 網頁)，則可使用該網站，並跳至這個逐步解說中稍後的「加入要偵錯的控制項」。否則，依照下列這些步驟建立新的網站和 Web 網頁。

若要建立檔案系統網站

開啟 Visual Web Developer。
在 [檔案] 功能表上，按一下 [新網站]。

[新網站] 對話方塊隨即出現。
請在 [Visual Studio 安裝的範本] 下方，按一下 [ASP.NET 網站]。
在 [位置] 方塊中，按一下 [檔案系統]，然後輸入您想要用來保存網站頁面的資料夾名稱。

例如，輸入資料夾名稱 C:\WebSites。
在 [語言] 清單中，按一下您想要操作的程式語言。

您選擇的程式語言將是網站的預設語言。不過，您可使用不同的程式語言建立網頁和元件，以在同一 Web 應用程式中使用多種語言。如需使用不同語言建立元件的相關資訊，請參閱 ASP.NET 網站中的共用程式碼資料夾。
按一下 [確定]。

Visual Web Developer 會建立資料夾和命名為 Default.aspx 的新頁面。

建立要偵錯的網頁

從建立新網頁開始。在這個逐步解說中，按照下列程序中指定的步驟建立新網頁很重要。

若要將網頁加入至網站

關閉 Default.aspx 網頁。
在 [方案總管] 中，以滑鼠右鍵按一下網站名稱 (例如，C:\WebSite)，並選擇 [加入新項目]。
在 [Visual Studio 安裝的範本] 下方，選擇 [Web Form]。
在 [名稱] 方塊中，輸入 DebugPage.aspx。
從 [語言] 清單中，選擇您想要使用的程式語言。
確保已清除 [將程式碼置於個別檔案中] 核取方塊。

在這個逐步解說中，您會建立程式碼和 HTML 在同一網頁中的單一檔案網頁。可在網頁或個別類別檔案中找到 ASP.NET Web 網頁的程式碼。若要進一步瞭解將程式碼保存在不同檔案中的方法，請參閱逐步解說：使用 Visual Web Developer 中的程式碼分離建立基本 Web 網頁。
按一下 [加入]。

Visual Web Developer 會建立新網頁並以 [原始碼] 檢視開啟它。

您現在可以將一些控制項加入網頁，然後加入程式碼。程式碼雖然簡單，但足以讓您稍後加入中斷點。

若要加入用於偵錯的控制項和程式碼

切換至 [設計] 檢視，然後從 [工具箱] 的 [標準] 資料夾中，將下列控制項拖曳至網頁，並依照指示設定其屬性：

控制項	屬性
Label	ID：CaptionLabel 文字：(空白)
TextBox	ID：NumberTextBox 文字：(空白)
Button	ID：SquareButton 文字：方形
Label	ID：ResultLabel 文字：(空白)

注意事項：
在此逐步解說中，頁面的配置並不重要。

按兩下 Button 控制項，為它建立 Click 處理常式。

將邏輯加入 Click 處理常式，以呼叫名稱為 Square 的函式來計算使用者輸入之數值的平方。處理常式可能看起來與下列範例相同。

注意事項：
程式碼範例故意不包含錯誤檢查。

Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

建立計算數值平方的函式。在程式碼中包含錯誤，讓數值與自身相加，而不是相乘。程式碼可能看起來與下列範例相同。

Function Square(number As Integer) As Integer
    Square = number + number
End Function

int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}

您也可將程式碼加入網頁，該程式碼會根據網頁是否是第一次執行來變更標籤的文字。

若要變更標題標籤控制項

在 [設計] 檢視中，按兩下設計介面 (而非控制項)，以建立 Page_Load 事件處理常式。

如果網頁是第一次執行，則將 [標題標籤] 控制項的文字設為 Enter a number:，否則設為 Enter another number:。處理常式看起來會與下列程式碼範例相同。

Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

測試網頁

若要確保網頁正在運作，請以目前狀態執行它。

若要執行網頁

儲存 Web 網頁。
按 CTRL+F5 執行頁面。
輸入數字 (2 除外)，並按 [平方] 按鈕。

請注意，結果是不正確的，因為程式中有錯誤。
關閉瀏覽器。

偵錯網頁

在逐步解說的這個部分中，您將使用偵錯工具逐行檢查執行中的網頁程式碼，將中斷點加入程式碼，然後以偵錯模式執行網頁。

從在程式碼中設定中斷點開始。中斷點是程式碼中執行停止並叫用偵錯工具所在的行。

若要設定中斷點

切換至 [原始碼] 檢視。
以滑鼠右鍵按一下下行，選擇 [中斷點]，然後選擇 [插入中斷點]。

注意事項：

您可藉由按 F9 切換中斷點。
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
在 SquareButton_Click 處理常式的下行上設定另一個中斷點：
```
result = Square(number)
```
```
result = Square(number);
```
注意事項：

您無法在宣告變數的陳述式上設定中斷點。

注意事項：
您可藉由按 F9 切換中斷點。

注意事項：
您無法在宣告變數的陳述式上設定中斷點。

至少設定一個中斷點之後，您才可執行偵錯工具。

若要執行偵錯工具

從 [偵錯] 功能表，選擇 [開始偵錯] (或按 F5)，以偵錯模式執行網頁。

如果您以前從未執行過偵錯工具，則可能沒有設定應用程式支援偵錯。根據預設，由於效能 (網頁在偵錯工具中執行起來更加緩慢) 和安全性原因，會關閉應用程式中的偵錯。Visual Web Developer 會顯示訊息，告知您如何處理啟用的偵錯。

啟用偵錯的參數做為設定儲存在 Web.config 檔中，該檔案包含各種網站特定的組態選項。如果 Web.config 檔不存在，則 Visual Web Developer 會建立該檔案，同時進行適當的偵錯工具設定。

如果 Web.config 檔已存在但未啟用偵錯，則您看到的訊息會略有不同，告知您 Visual Web Developer 會修改 Web.config 檔。
如果看到的訊息告知您尚未啟用偵錯，請按一下 [確定] 以啟用偵錯。

在 Visual Web Developer 中，設計工具會變更為顯示網頁程式碼和一些偵錯工具視窗的偵錯模式。

偵錯工具會逐行執行網頁。當偵錯工具到達中斷點所在的行時，會停止並反白顯示該行。

因為中斷點在 Page_Load 處理常式中，所以網頁尚未完成處理。雖然已開啟瀏覽器，但仍未顯示網頁。
在 [偵錯] 功能表中，依序按一下 [視窗]、[監看式] 和 [監看式 1]。

注意事項：

如果您在使用 Visual Web Developer Express 版，則偵錯工具只會提供單一 [監看式] 視窗。

如此會開啟 [監看式] 視窗，您可在其中指定要追蹤的值。
在編輯器中，以滑鼠右鍵按一下 Page.IsPostBack 運算式的 IsPostBack 部分，再按 [加入監看式]。

如此會將運算式加入 [監看式] 視窗，並顯示出屬性 (false) 的目前值已顯示在 [值] 欄中。如果願意，您可在 [監看式] 視窗的 [名稱] 欄中輸入變數的名稱或屬性。
從 [偵錯] 功能表中選擇 [繼續] 以繼續執行，或按 F5。

[繼續] 命令會告知偵錯工具繼續進行，直到到達下一個中斷點。Page_Load 事件處理常式會完成處理，且會在瀏覽器中顯示網頁。
在文字方塊中輸入值 2，並按一下 [平方] 按鈕。

會再次顯示偵錯工具，且 Page_Load 處理常式的程式碼行上有中斷點。這次，[監看式] 視窗會顯示 Page.IsPostBack 的值為 true。
再按 F5 繼續。

偵錯工具會處理 Page_Load 處理常式並進入 SquareButton_Click 處理常式，並在您設定的第二個中斷點上停止。
在 [偵錯] 功能表中，按一下 [視窗]，再按 [區域變數]。

如此會開啟 [區域變數] 視窗，其會在目前執行的行上顯示範圍中所有變數和物件的值。[區域變數] 視窗為您提供了檢視這些值的替代方式，優點是您無需在項目上明確地設定監看式，而缺點是該視窗包含的資訊可能比您想要查看的資訊多。

在 [區域變數] 視窗中，您會看到 number 的值為 2，而 result 的值為 0。

注意事項：

您還可以將滑鼠指標置於變數上，以查看程式中任何變數的值。
在 [區域變數] 視窗的 [值] 欄中，以滑鼠右鍵按一下 number 變數所在的行，並選取 [編輯值]。編輯 number 變數的值，並將其變更為 5。

變數 number 的值為 2 不是程式的最佳測試值，因為加上 2 和對它計算平方的結果都是 4。因此，程式執行時，您可以變更這個變數的值。
從 [偵錯] 功能表中，選擇 [逐步執行] 以逐步執行 Square 函式，或按 F11。

[逐步執行] 命令會使偵錯工具執行一行之後再次停止。
藉由按 F11 繼續逐步偵錯，直到到達下一行程式碼為止。
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
偵錯工具會逐步執行每一行程式碼。當偵錯工具執行 Square 函式時，您可以使用 [區域變數] 視窗檢查傳遞給函式 (number) 的資料和函式 (Square) 的傳回值。
在 [偵錯] 功能表中，按一下 [視窗]，再按 [即時運算]。

[即時運算] 視窗可讓您執行命令。您可以使用該視窗評估運算式 (例如，取得屬性的值)。
在 [即時運算] 視窗中，輸入下列運算式並按 Enter。
```
? NumberTextBox.Text
```
問號 (?) 是 [即時運算] 視窗的運算子，該視窗會評估後面的運算式。在這個範例中，您在評估網頁上 NumberTextBox 控制項的 Text 屬性。您可評估任何變數、物件屬性或結合它們的運算式，結合所使用的語法與您在程式碼中用到的相同。
在 [即時運算] 視窗中，輸入下列運算式並按 Enter：
```
NumberTextBox.Text = "5"
```
除了評估運算式之外，[即時運算] 視窗還可讓您變更變數或屬性。
請按 F5 繼續執行程式。

出現網頁時，它會顯示將 5 傳遞給 Square 函式的結果。此外，文字方塊中的文字已變更為 5。

注意事項：
如果您在使用 Visual Web Developer Express 版，則偵錯工具只會提供單一 [監看式] 視窗。

注意事項：
您還可以將滑鼠指標置於變數上，以查看程式中任何變數的值。

您所看到的結果 10 是不正確的，因為 10 不是 5 的平方。您現在可以修正錯誤。

若要修正錯誤並重新測試

從瀏覽器切換至 Visual Web Developer。

注意事項：

請勿關閉瀏覽器視窗。
在 Square 函式中，將 "+" 運算子變更為 "*" 運算子。

因為程式碼目前不在執行中 (網頁已完成處理)，所以您處於編輯模式，可以進行永久變更。
按 CTRL+S 儲存網頁。
從 [偵錯] 功能表中，選擇 [刪除所有中斷點]，這樣網頁就不會在每次執行時都停止。

注意事項：

您還可藉由按 CTRL+SHIFT+F9 清除中斷點。
切換至瀏覽器視窗。
在文字方塊中輸入 5 並按一下按鈕。

這次，您執行網頁並輸入值時，就會正確地計算平方值。您之前所做的暫存變更 (例如，變更 NumberTextBox 控制項的 Text 屬性) 尚未保存，因為這些變更只在網頁最後一次執行時才套用。
關閉瀏覽器以停止偵錯工具。

注意事項：
請勿關閉瀏覽器視窗。

注意事項：
您還可藉由按 CTRL+SHIFT+F9 清除中斷點。

後續步驟

偵錯工具包含協助您使用程式碼的其他功能。此外，您可能想要瞭解處理錯誤狀況的技術以及可用於在執行階段監視網頁處理的方式。例如，您可能要瀏覽追蹤。如需詳細資訊，請參閱逐步解說：使用 Visual Web Developer 中的追蹤功能協助找出 Web 網頁錯誤。

請參閱

其他資源

Visual Studio 偵錯