共用方式為


偵錯 ASP.NET 網頁 (Razor) 網站簡介

演講者:Tom FitzMacken

本文介紹了在 ASP.NET 網頁 (Razor) 網站中偵錯頁面的各種方法。 偵錯是尋找並修復程式碼頁中的錯誤的過程。

您將學到什麼:

  • 如何顯示有助於分析和偵錯頁面的資訊。
  • 如何使用 Visual Studio 中的偵錯工具。

這些就是本文介紹的 ASP.NET 功能:

  • ServerInfo協助程式。
  • ObjectInfo協助程式

軟體版本

  • ASP.NET 網頁 (Razor) 3
  • Visual Studio 2013

本教學也適用於 ASP.NET 網頁 2。 您可以使用 WebMatrix 3,但不支援整合式偵錯程式。

解決程式碼中的錯誤和問題的一個重要方面是首先避免它們。 您可以透過將可能導致錯誤的程式碼部分放入 try/catch 區塊中來做到這一點。 有關詳細資訊,請參閱使用 Razor 語法的 ASP.NET Web 程式設計簡介中有關處理錯誤的部分。

ServerInfo 協助程式是一種診斷工具,可讓您概覽有關託管頁面的 Web 伺服器環境的資訊。 它還顯示瀏覽器請求頁面時發送的 HTTP 請求資訊。 ServerInfo 協助程式顯示目前使用者身分、發出要求的瀏覽器類型等。 此類資訊可以幫助您解決常見問題。

  1. 建立一個名為 ServerInfo.cshtml 的新網頁。

  2. 在頁面末尾的結束 </body> 標記之前新增@ServerInfo.GetHtml()

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
       @ServerInfo.GetHtml()
        </body>
    </html>
    

    您可以在頁面的任何位置新增 ServerInfo 程式碼。 但將其添加到末尾將使其輸出與其他頁面內容分開,從而更易於閱讀。

    注意

    重要事項 在將網頁移至生產伺服器之前,您應該從網頁中刪除所有診斷代碼。 這適用於 ServerInfo 協助程式以及本文中涉及向頁面添加程式碼的其他診斷技術。 您不希望網站訪客看到有關您的伺服器名稱、使用者名稱、伺服器上的路徑以及類似詳細資訊的資訊,因為此類資訊可能對懷有惡意的人有用。

  3. 儲存頁面並在瀏覽器中執行它。

    偵錯-1

    ServerInfo 協助程式在頁面中顯示四個資訊表:

    • 伺服器設定。 本部分提供有關託管 Web 伺服器的資訊,包括電腦名稱、正在執行的 ASP.NET 版本、網域名稱和伺服器時間。

    • ASP.NET 伺服器變數。 本節提供有關許多 HTTP 協定詳細資訊 (稱為 HTTP 變數) 和每個網頁請求一部分的值的詳細資訊。

    • HTTP 執行時間資訊。 本部分提供有關網頁執行的 Microsoft .NET Framework 版本、路徑、快取詳細資訊等的詳細資訊。 (如您在使用 Razor 語法的 ASP.NET Web 程式設計簡介中所了解的,使用 Razor 語法的 ASP.NET 網頁是基於 Microsoft 的 ASP.NET Web 伺服器技術所建構的,該技術本身是建構於名為 . NET 架構。)

    • 環境變數。 本節提供了 Web 伺服器上所有本機環境變數及其值的清單。

      所有伺服器和請求資訊的完整描述超出了本文的範圍,但您可以看到 ServerInfo 協助程式傳回了大量診斷資訊。 有關 ServerInfo 傳回值的詳細資訊,請參閱 Microsoft TechNet 網站上的可識別環境變數和 MSDN 網站上的 IIS 伺服器變數

嵌入輸出表達式以顯示頁面值

查看程式碼中發生的情況的另一種方法是將輸出表達式嵌入頁面中。 如您所知,您可以透過在頁面中新增類似 @myVariable@(subTotal * 12) 之類的內容來直接輸出變數的值。 為了進行偵錯,您可以將這些輸出表達式放置在程式碼中的重要位置。 這使您能夠在頁面執行時查看關鍵變數的值或計算結果。 完成偵錯後,您可以刪除表達式或將其註解掉。此過程說明了使用嵌入表達式來幫助偵錯頁面的典型方法。

  1. 建立一個名為 OutputExpression.cshtml 的新 WebMatrix 頁面。

  2. 將頁面內容替換為以下內容:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>   
    
        @{
            var weekday = DateTime.Now.DayOfWeek;
            // As a test, add 1 day to the current weekday.
            if(weekday.ToString() != "Saturday") {
                // If weekday is not Saturday, simply add one day.
                weekday = weekday + 1; 
            }
            else {
                // If weekday is Saturday, reset the day to 0, or Sunday.
                weekday = 0; 
            }
            // Convert weekday to a string value for the switch statement.
            var weekdayText = weekday.ToString(); 
    
            var greeting = "";
            
            switch(weekdayText) 
            { 
                case "Monday":
                    greeting = "Ok, it's a marvelous Monday."; 
                    break; 
                case "Tuesday":
                    greeting = "It's a tremendous Tuesday.";
                    break; 
                case "Wednesday":
                    greeting = "Wild Wednesday is here!";
                    break; 
                case "Thursday":
                    greeting = "All right, it's thrifty Thursday.";
                    break;
                case "Friday":
                    greeting = "It's finally Friday!";
                    break;
                case "Saturday":
                    greeting = "Another slow Saturday is here.";
                    break;
                case "Sunday":
                    greeting = "The best day of all: serene Sunday.";
                    break;
                default:
                    break; 
            }
        }
        
        <h2>@greeting</h2>
    
        </body>
    </html>
    

    此範例使用 switch 語句來檢查 weekday 變數的值,然後根據特定星期幾顯示不同的輸出訊息。 在這個範例中,第一個程式碼區塊中的 if 區塊透過向當前工作日值新增一天來任意變更星期幾。 這是出於說明目的而引入的錯誤。

  3. 儲存頁面並在瀏覽器中執行它。

    該頁面顯示錯誤的星期幾的訊息。 無論實際是一週中的哪一天,您都會在一天後看到該訊息。 儘管在這種情況下您知道訊息關閉的原因 (因為程式碼故意設定了不正確的日期值),但實際上通常很難知道程式碼中哪裡出了問題。 要進行偵錯,您需要找出關鍵物件和變數,例如 weekday

  4. 透過插入 @weekday 來新增輸出表達式,如程式碼中註解指示的兩個位置所示。 這些輸出表達式將顯示程式碼執行中該點的變數值。

    var weekday = DateTime.Now.DayOfWeek;
    // DEBUG: Display the initial value of weekday. 
    @weekday
    
    // As a test, add 1 day to the current weekday.
    if(weekday.ToString() != "Saturday") {
        // If weekday is not Saturday, simply add one day.
        weekday = weekday + 1; 
    }
    else {
        // If weekday is Saturday, reset the day to 0, or Sunday.
        weekday = 0; 
    }
    
    // DEBUG: Display the updated test value of weekday.
    @weekday
    
    // Convert weekday to a string value for the switch statement.
    var weekdayText = weekday.ToString();
    
  5. 儲存並在瀏覽器中執行該頁面。

    頁面首先顯示一週中的實際日期,然後顯示新增一天後更新的一週中的一天,然後是 switch 語句中產生的訊息。 兩個變數表達式 (@weekday) 的輸出在日期之間沒有空格,因為您沒有在輸出中新增任何 HTML <p>標記;這些表達式僅用於測試。

    偵錯-2

    現在您可以看到錯誤在哪裡。 當您第一次在程式碼中顯示 weekday 變數時,它會顯示正確的日期。 當您第二次顯示它時,在程式碼中的 if 區塊之後,日期會減少一天。 所以您知道在工作日變數第一次和第二次出現之間發生了一些事情。 如果這是一個真正的錯誤,這種方法將幫助您縮小導致問題的程式碼位置的範圍。

  6. 透過刪除您新增的兩個輸出表達式並刪除更改星期幾的程式碼來修復頁面中的程式碼。 剩餘的完整程式碼區塊如下例所示:

    @{
        var weekday = DateTime.Now.DayOfWeek;
        var weekdayText = weekday.ToString(); 
    
        var greeting = "";
            
        switch(weekdayText) 
        { 
            case "Monday":
                greeting = "Ok, it's a marvelous Monday."; 
                break; 
            case "Tuesday":
                greeting = "It's a tremendous Tuesday.";
                break; 
            case "Wednesday":
                greeting = "Wild Wednesday is here!";
                break; 
            case "Thursday":
                greeting = "All right, it's thrifty Thursday.";
                break;
            case "Friday":
                greeting = "It's finally Friday!";
                break;
            case "Saturday":
                greeting = "Another slow Saturday is here.";
                break;
            case "Sunday":
                greeting = "The best day of all: serene Sunday.";
                break;
            default:
                break; 
        }
    }
    
  7. 在瀏覽器中執行該頁面。 這次您會看到針對一週中的實際日期顯示的正確訊息。

使用 ObjectInfo Helper 顯示物件值

ObjectInfo 協助程式會顯示您傳遞給它的每個物件的類型和值。 您可以使用它來查看程式碼中變數和物件的值 (就像在上一個範例中對輸出表達式所做的那樣),此外您還可以查看有關物件的資料類型資訊。

  1. 開啟您先前建立的名為 OutputExpression.cshtml 的檔案。

  2. 將頁面中的所有程式碼替換為以下程式碼區塊:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <body>
        @{
          var weekday = DateTime.Now.DayOfWeek;
          @ObjectInfo.Print(weekday)
          var weekdayText = weekday.ToString(); 
      
          var greeting = "";
      
          switch(weekdayText) 
          { 
              case "Monday":
                  greeting = "Ok, it's a marvelous Monday."; 
                  break; 
              case "Tuesday":
                  greeting = "It's a tremendous Tuesday.";
                  break; 
              case "Wednesday":
                  greeting = "Wild Wednesday is here!";
                  break; 
              case "Thursday":
                  greeting = "All right, it's thrifty Thursday.";
                  break;
              case "Friday":
                  greeting = "It's finally Friday!";
                  break;
               case "Saturday":
                  greeting = "Another slow Saturday is here.";
                  break;
               case "Sunday":
                  greeting = "The best day of all: serene Sunday.";
                  break;
              default:
                  break; 
          }
        }
        @ObjectInfo.Print(greeting)
        <h2>@greeting</h2>
    
        </body>
    </html>
    
  3. 儲存並在瀏覽器中執行該頁面。

    偵錯-4

    在此範例中,ObjectInfo 協助程式顯示兩項:

    • 「類型」。 對於第一個變量,類型為 DayOfWeek。 對於第二個變量,類型為 String

    • 值。 在這種情況下,因為您已經在頁面中顯示了greeting變數的值,所以當您將該變數傳遞給 ObjectInfo 時,該值會再次顯示。

      對於更複雜的對象,ObjectInfo 協助程式可以顯示更多資訊 - 基本上,它可以顯示對象所有屬性的類型和值。

在 Visual Studio 中使用偵錯工具

若要獲得更全面的偵錯體驗,請使用 Visual Studio。 使用 Visual Studio,您可以在程式碼中要檢查的行處設定斷點。

設定斷點

當您測試網站時,執行程式碼會在斷點處停止。

到達斷點

您可以檢查變數的目前值,並逐行執行程式碼。

請參閱值

有關使用 Visual Studio 中的整合式偵錯器來偵錯 ASP.NET Razor 頁面的資訊,請參閱使用 Visual Studio 編程 ASP.NET 網頁 (Razor)

其他資源