次の方法で共有

チュートリアル : Visual Web Developer での Web ページのデバッグ

  • [アーティクル]

更新 : 2007 年 11 月

Visual Web Developer には、ASP.NET Web ページ内のエラーを追跡するのに役立つツールが用意されています。このチュートリアルでは、デバッガを使用します。デバッガを使用すると、ページのコード行を 1 行ずつステップ実行し、変数の値を調べることができます。

このチュートリアルでは、数値を 2 乗する簡単な電卓を含む Web ページを作成します。意図的にエラーを含ませたページを作成した後、デバッガを使用して、実行中にページを調べます。

このチュートリアルでは、以下のタスクを行います。

  • ブレークポイントの設定

  • ファイル システム Web サイトの Web フォーム ページからのデバッガの呼び出し

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Visual Web Developer と .NET Framework

Visual Web Developer の基本的な操作方法を理解していることも必要です。Visual Web Developer の概要については、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を参照してください。

Web サイトおよびページの作成

このチュートリアルでは、最初にデバッグできるページを作成します。

Visual Web Developer で Web サイトを既に作成している場合 (「チュートリアル : Visual Web Developer での基本的な Web ページの作成」を使用した場合など) は、その Web サイトを使用して、このチュートリアルの後半の「デバッグ用のコントロールとコードを追加するには」にスキップできます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイル システム Web サイトを作成するには

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\WebSites」と入力します。

  5. [言語] ボックスで、作業に使用するプログラミング言語をクリックします。

    ここで選択するプログラミング言語が、Web サイトの既定の言語となります。ただし、複数のプログラミング言語でページとコンポーネントを作成すると、1 つの Web アプリケーションで複数の言語を使用できます。複数の異なる言語を使用してコンポーネントを作成する方法の詳細については、「ASP.NET Web サイト内の共有コード フォルダ」を参照してください。

  6. [OK] をクリックします。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

デバッグするページの作成

まず、新しいページを作成します。このチュートリアルでは、次の手順で指定されたとおりに新しいページを作成する必要があります。

Web サイトに新しいページを追加するには

  1. Default.aspx ページを閉じます。

  2. ソリューション エクスプローラで、Web サイト名 (たとえば、C:\WebSite) を右クリックし、[新しい項目の追加] をクリックします。

  3. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

  4. [名前] ボックスに「DebugPage.aspx」と入力します。

  5. [言語] ボックスで、使用するプログラミング言語をクリックします。

  6. [別のファイルにコードを書き込む] チェック ボックスがオフになっていることを確認します。

    このチュートリアルでは、コードと HTML が同じページにある、単一ファイルのページを作成します。ASP.NET ページのコードは、同じページ上に置くことも、別のクラス ファイルに入れることもできます。コードを別のファイルに置く方法の詳細については、「チュートリアル : Visual Web Developer でのコードの分離を使用した基本的な Web ページの作成」を参照してください。

  7. [追加] をクリックします。

    Visual Web Developer により新しいページが作成され、ソース ビューに表示されます。

ここで、ページにいくつかのコントロールを追加した後、コードを追加できます。コードは単純ですが、後でブレークポイントを追加するには十分です。

デバッグ用のコントロールとコードを追加するには

  1. デザイン ビューに切り替えて、ツールボックスの [標準] フォルダから次のコントロールをページにドラッグし、次のようにプロパティを設定します。

    コントロール

    プロパティ

    Label

    ID : CaptionLabel

    Text : (空)

    TextBox

    ID : NumberTextBox

    Text : (空)

    Button

    ID : SquareButton

    Text : Square

    Label

    ID : ResultLabel

    Text : (空)
    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    このチュートリアルでは、ページのレイアウトは重要ではありません。

  2. Button コントロールをダブルクリックして、Click ハンドラを作成します。

  3. ユーザーが入力した数値を 2 乗する Square という名前の関数を呼び出すロジックを Click ハンドラに追加します。ハンドラは、次の例のようになります。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    コード例には、意図的にエラー チェックを含めていません。

    		 
    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();
}

  4. 数値を 2 乗する関数を作成します。数値を掛けるのではなく、数値自体に加算するバグをコードに追加します。コードは、次の例のようになります。

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

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

ページを初めて実行するかどうかによって、ラベルのテキストを変更するコードをページに追加することもできます。

キャプションの Label コントロールを変更するには

  1. デザイン ビューで (コントロールではなく) デザイン サーフェイスをダブルクリックし、Page_Load イベント ハンドラを作成します。

  2. ページを初めて実行する場合は、Caption Label コントロールのテキストを「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: " ;
}

ページのテスト

ページが動作することを確認するには、現在の状態でページを実行します。

ページを実行するには

  1. ページを保存します。

  2. Ctrl キーを押しながら F5 キーを押してページを実行します。

  3. 数値 3 を入力して、[Square] をクリックします。

    プログラムにバグがあるため、結果が間違っています。正しい結果は 9 です。

  4. ブラウザを閉じます。

ページのデバッグ

このチュートリアルでは、デバッガを使用して、実行中に 1 行ずつページ コードを調べ、コードにブレークポイントを追加して、ページをデバッグ モードで実行します。

まず、コードにブレークポイントを設定します。ブレークポイントは、実行が停止し、デバッガが呼び出されるコード内の行です。

ブレークポイントを設定するには

  1. ソース ビューに切り替えます。

  2. 次の行を右クリックし、[ブレークポイント] をポイントします。次に、[ブレークポイントの挿入] をクリックします。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    F9 キーを押すと、ブレークポイントを切り替えることができます。

    		 
    If Page.IsPostBack = False Then

    if(Page.IsPostBack == false)

  3. SquareButton_Click ハンドラの次の行に、別のブレークポイントを設定します。

    result = Square(number)

    result = Square(number);
    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    変数を宣言するステートメントにブレークポイントを設定することはできません。

少なくとも 1 つのブレークポイントを設定すると、デバッガを実行できるようになります。

デバッガを実行するには

  1. [デバッグ] メニューの [デバッグ開始] をクリックし (または F5 キーを押し)、ページをデバッグ モードで実行します。

    デバッガを実行したことがない場合、アプリケーションがデバッグをサポートするように設定されていない可能性があります。既定では、パフォーマンス上の理由 (デバッガではページの実行が遅くなります) とセキュリティ上の理由から、アプリケーションのデバッグはオフになっています。Visual Web Developer では、デバッグを有効するために必要な設定を通知するメッセージが表示されます。

    デバッグを有効にするスイッチは、Web.config ファイルの設定として格納されています。このファイルは、サイト固有のさまざまな構成オプションを保持します。Web.config ファイルが存在しない場合は、Visual Web Developer によりファイルが作成され、適切なデバッグ設定が行われます。

    Web.config ファイルが既に存在し、デバッグが有効になっていない場合は、Visual Web Developer により Web.config ファイルが変更されることを通知する、若干異なるメッセージが表示されます。

  2. デバッグが有効になっていないことを通知するメッセージが表示された場合は、[OK] をクリックして、デバッグを有効にします。

    Visual Web Developer では、デザイナがデバッグ モードに変更され、ページのコードとデバッガ ウィンドウが表示されます。

    デバッガは、ページを 1 行ずつ実行します。デバッガがブレークポイントのある行に到達すると、デバッガが停止し、行が強調表示されます。

    ブレークポイントは Page_Load ハンドラ内にあるため、ページはまだ処理を完了していません。ブラウザは開いていますが、ページはまだ表示されていません。

  3. [デバッグ] メニューの [ウィンドウ]、[ウォッチ] を順にクリックし、[ウォッチ 1] をクリックします。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    Visual Web Developer Express Edition を使用している場合、デバッガには [ウォッチ] ウィンドウだけが表示されます。

    これにより [ウォッチ] ウィンドウが開きます。このウィンドウでは、追跡する値を指定できます。

  4. エディタで Page.IsPostBack 式の IsPostBack 部分を右クリックし、[ウォッチ式の追加] をクリックします。

    これにより、式が [ウォッチ] ウィンドウに追加され、プロパティの現在の値 (false) が [値] 列に表示されます。必要に応じて、[ウォッチ] ウィンドウの [名前] 列に変数またはプロパティの名前を入力することもできます。

  5. 続行するには [デバッグ] メニューの [続行] をクリックするか、F5 キーを押します。

    [続行] コマンドは、次のブレークポイントに到達するまで処理を続行するようにデバッガに通知します。Page_Load イベント ハンドラは処理を完了し、ページがブラウザに表示されます。

  6. テキスト ボックスに「2」と入力し、[Square] をクリックします。

    デバッガが再表示され、Page_Load ハンドラの行にブレークポイントが設定されます。今度は、[ウォッチ] ウィンドウに Page.IsPostBack の値が true であることが表示されます。

  7. F5 キーを再度押して続行します。

    デバッガは Page_Load ハンドラを処理し、設定した 2 番目のブレークポイントで停止する SquareButton_Click ハンドラに入ります。

  8. [デバッグ] メニューの [ウィンドウ] をポイントし、[ローカル] をクリックします。

    これにより、[ローカル] ウィンドウが開きます。このウィンドウには、実行中の現在の行でスコープ内にあるすべての変数とオブジェクトの値が表示されます。[ローカル] ウィンドウを使用すると、別の方法でこれらの値を表示できます。この方法には、要素にウォッチを明示的に設定する必要がないという長所がありますが、ウィンドウに一度に表示できない情報が含まれる可能性があるという短所もあります。

    [ローカル] ウィンドウに、number の値が 2、result の値が 0 であることが表示されます。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    マウス ポインタを上に置くことで、プログラム内の変数の値を表示することもできます。

  9. [ローカル] ウィンドウの [値] 列で、number 変数の行を右クリックし、[値の編集] をクリックします。number 変数の値を編集し、5 に変更します。

    変数 number の値 2 は、プログラムの適切なテストではありません。これは、2 の加算と 2 乗の結果は、どちらも 4 になるためです。したがって、プログラムの実行中にこの変数の値を変更できます。

  10. [デバッグ] メニューの [ステップ イン] をクリックして、Square 関数を実行するか、F11 キーを押します。

    [ステップ イン] によりデバッガで行が実行され、再度停止します。

  11. 次のコード行に到達するまで、F11 キーを押して実行を続行します。

    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)

        ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();

    デバッガによりコードが 1 行ずつ実行されます。デバッガが Square 関数を実行すると、[ローカル] ウィンドウを使用して、関数に渡されるデータ (number)、および関数の戻り値 (Square) をチェックできます。

  12. [デバッグ] メニューの [ウィンドウ] をポイントし、[イミディエイト] をクリックします。

    [イミディエイト] ウィンドウを使用すると、コマンドを実行できます。このウィンドウを使用すると、式を評価できます (プロパティの値を取得するなど)。

  13. [イミディエイト] ウィンドウに次の式を入力して、Enter キーを押します。

    ? NumberTextBox.Text

    疑問符 (?) は、その後に続く式を評価する [イミディエイト] ウィンドウ内の演算子です。この例では、ページの NumberTextBox コントロールの Text プロパティを評価します。コードで使用するのと同じ構文を使用して、これらを結合する変数、オブジェクト プロパティ、または式を評価できます。

  14. [イミディエイト] ウィンドウに次のように入力して、Enter キーを押します。

    NumberTextBox.Text = "5"

    式を評価する以外に、[イミディエイト] ウィンドウでは変数またはプロパティも変更できます。

  15. F5 キーを押してプログラムの実行を続行します。

    ページが表示されると、Square 関数に 5 を渡した結果が表示されます。また、テキスト ボックス内のテキストが 5 に変更されています。

表示された結果 (10) は正しくありません。これは、10 は 5 の 2 乗ではないためです。ここでバグを修正できます。

バグを修正して再度テストするには

  1. ブラウザから Visual Web Developer に切り替えます。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    ブラウザ ウィンドウは閉じないでください。

  2. Square 関数で "+" 演算子を "*" 演算子に変更します。

    コードは現在実行されていない (ページは処理を完了している) ため、現在は編集モードで永続的な変更を実行できます。

  3. Ctrl キーを押しながら S キーを押してページを保存します。

  4. [デバッグ] メニューの [すべてのブレークポイントの削除] をポイントして、ページを実行するたびにページが停止しないようにします。

    z9e7w6cs.alert_note(ja-jp,VS.90).gifメモ :

    Ctrl キーを押しながら Shift キーと F9 キーを押して、ブレークポイントを消去することもできます。

  5. ブラウザ ウィンドウに切り替えます。

  6. テキスト ボックスに「5」と入力し、ボタンをクリックします。

    今度は、ページを実行して値を入力すると、正しく 2 乗されます。NumberTextBox コントロールの Text プロパティの変更など、以前に行った一時的な変更は永続的ではありません。このような変更は、ページを前回実行したときにのみ適用されたためです。

  7. ブラウザを閉じて、デバッガを停止します。

次の手順

デバッガには、コードによって操作できる追加機能も含まれています。また、エラー条件を処理する技法、および実行時にページ処理を監視する方法を学習することもできます。たとえば、トレースを調べる場合などです。詳細については、「チュートリアル : Web ページ エラーの検索に役立つ Visual Web Developer でのトレースの使用」を参照してください。

参照

その他の技術情報

Visual Studio でのデバッグ