次の方法で共有


ASP.NET Webページ (Razor) サイトのデバッグ入門

作成者: Tom FitzMacken

この記事では、ASP.NET Web ページ (Razor) Web サイト内のページをデバッグするさまざまな方法について説明します。 デバッグは、コード ページのエラーを見つけて修正するプロセスです。

学習内容:

  • ページの分析とデバッグに役立つ情報を表示する方法。
  • Visual Studio でデバッグ ツールを使用する方法。

この記事で紹介した ASP.NET 機能を次に示します。

  • ServerInfo ヘルパー。
  • ObjectInfo ヘルパー。

ソフトウェア バージョン

  • ASP.NET Web ページ (Razor) 3
  • Visual Studio 2013

このチュートリアルは、ASP.NET Web ページ 2 でも動作します。 WebMatrix 3 を使用できますが、統合デバッガーはサポートされていません。

コード内のエラーと問題のトラブルシューティングの重要な側面は、最初にそれらを回避することです。 これを行うには、エラーの原因となる可能性のあるコードのセクションを try/catch ブロックに配置します。 詳細については、「 Razor 構文を使用した ASP.NET Web プログラミングの概要」のエラー処理に関するセクションを参照してください。

ServerInfo ヘルパーは、ページをホストする Web サーバー環境に関する情報の概要を提供する診断ツールです。 ブラウザーがページを要求したときに送信される HTTP 要求情報も表示されます。 ServerInfo ヘルパーには、現在のユーザー ID、要求を行ったブラウザーの種類などが表示されます。 この種の情報は、一般的な問題のトラブルシューティングに役立ちます。

  1. ServerInfo.cshtml という名前の新しい Web ページを作成します。

  2. ページの最後で、終了 </body> タグの直前に、 @ServerInfo.GetHtml()を追加します。

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

    ServerInfo コードは、ページ内の任意の場所に追加できます。 ただし、最後に追加すると、出力が他のページ コンテンツとは分離され、読みやすくなります。

    大事な Web ページを運用サーバーに移動する前に、Web ページから診断コードを削除する必要があります。 これは、ページにコードを追加する ServerInfo ヘルパーと、この記事の他の診断手法に適用されます。 この種の情報は悪意のあるユーザーに役立つ可能性があるため、Web サイトの訪問者に、サーバー名、ユーザー名、サーバー上のパス、および同様の詳細に関する情報を表示しないようにします。

  3. ページを保存し、ブラウザーで実行します。

    Debugging-1

    ServerInfo ヘルパーは、ページに次の 4 つの情報テーブルを表示します。

    • サーバー構成。 このセクションでは、コンピューター名、実行している ASP.NET のバージョン、ドメイン名、サーバー時刻など、ホスティング Web サーバーに関する情報を提供します。

    • ASP.NET サーバー変数。 このセクションでは、多くの HTTP プロトコルの詳細 (HTTP 変数と呼ばれます) と、各 Web ページ要求の一部である値について詳しく説明します。

    • HTTP ランタイム情報。 このセクションでは、Web ページが実行されている Microsoft .NET Framework のバージョン、パス、キャッシュの詳細などについて説明します。 ( Razor 構文を使用した ASP.NET Web プログラミングの概要で学習したように、Razor 構文を使用した ASP.NET Web ページは、Microsoft の ASP.NET Web サーバー テクノロジに基づいて構築されています。これは、それ自体が .NET Framework と呼ばれる広範なソフトウェア開発ライブラリ上に構築されています)。

    • 環境変数。 このセクションでは、Web サーバー上のすべてのローカル環境変数とその値の一覧を提供します。

      すべてのサーバーと要求情報の完全な説明は、この記事の範囲外ですが、 ServerInfo ヘルパーは多くの診断情報を返すことがわかります。 ServerInfo返される値の詳細については、「Microsoft TechNet Web サイトの認識された環境変数」および MSDN Web サイトの IIS サーバー変数を参照してください。

ページ値を表示するための出力式の埋め込み

コードで何が起こっているかを確認するもう 1 つの方法は、出力式をページに埋め込むことです。 ご存知のように、 @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 ブロックは、現在の曜日の値に 1 日を追加することで、曜日を任意に変更します。 これは、説明のために導入されたエラーです。

  3. ページを保存し、ブラウザーで実行します。

    ページには、間違った曜日のメッセージが表示されます。 実際の曜日に関係なく、1 日後にメッセージが表示されます。 この場合、メッセージがオフになっている理由はわかっていますが (コードによって誤った日の値が意図的に設定されるため)、実際にはコードのどこで問題が発生しているのかを知ることは困難なことがよくあります。 デバッグするには、 weekdayなどのキー オブジェクトと変数の値に何が起こっているかを調べる必要があります。

  4. コード内のコメントで示されている 2 つの場所に示すように、 @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. ブラウザーでページを保存して実行します。

    ページには、最初の週の実際の曜日、次に 1 日を追加した結果の更新された曜日、次に switch ステートメントからの結果のメッセージが表示されます。 2 つの変数式 (@weekday) からの出力には、HTML <p> タグを出力に追加していないため、日の間にスペースがありません。式はテスト用です。

    Debugging-2

    これで、エラーがどこにあるかを確認できます。 コードに最初に weekday 変数を表示すると、正しい日付が表示されます。 2 回目に表示すると、コード内の if ブロックの後で、日付が1日ずれて表示されます。 したがって、曜日変数が最初に現れた時と2回目に現れた時の間に何かが起こったことを知ります。 これが実際のバグである場合、この種のアプローチは、問題の原因となっているコードの場所を絞り込むのに役立ちます。

  6. 追加した 2 つの出力式を削除し、曜日を変更するコードを削除して、ページ内のコードを修正します。 残りの完全なコード ブロックは、次の例のようになります。

    @{
        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 ヘルパーを使用してオブジェクト値を表示する

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. ブラウザーでページを保存して実行します。

    Debugging-4

    この例では、 ObjectInfo ヘルパーに次の 2 つの項目が表示されます。

    • 型。 最初の変数の場合、型は DayOfWeek。 2 番目の変数の場合、型は String

    • 値。 この場合、ページにグリーティング変数の値が既に表示されているため、変数を ObjectInfoに渡すと、値が再び表示されます。

      より複雑なオブジェクトの場合、 ObjectInfo ヘルパーは詳細情報を表示できます。基本的には、オブジェクトのすべてのプロパティの型と値を表示できます。

Visual Studio でのデバッグ ツールの使用

より包括的なデバッグ エクスペリエンスを実現するには、 Visual Studio を使用します。 Visual Studio では、検査する行のコードにブレークポイントを設定できます。

ブレークポイントの設定

Web サイトをテストすると、実行中のコードがブレークポイントで停止します。

ブレークポイントに到達する

変数の現在の値を調べ、コードを 1 行ずつステップ実行できます。

値を表示する

Visual Studio で統合デバッガーを使用して ASP.NET Razor ページをデバッグする方法の詳細については、「 Visual Studio を使用した Web ページ ASP.NET プログラミング (Razor)」を参照してください。

その他のリソース