Share via

AJAX アプリケーションのデバッグとトレースの概要

  • [アーティクル]

更新 : 2007 年 11 月

AJAX 対応の ASP.NET アプリケーションには、さまざまなサーバー コードとクライアント コードが含まれています。ブラウザから追加データを非同期に要求することもできます。このため、AJAX 対応の Web アプリケーションのデバッグは困難になる可能性があります。この概要では、コードを簡単にデバッグするのに役立つ方法とツールについて説明します。

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

Visual Studio と Internet Explorer を除き、ここで説明しているプログラムはサードパーティ製のツールであり、Microsoft ではサポートされていません。ライセンスおよびサポート情報については、ツールの Web サイトを参照してください。

このトピックの内容は次のとおりです。

  • シナリオ

  • 背景

  • クラス リファレンス

シナリオ

次の方法により、開発のさまざまな段階で AJAX 対応の ASP.NET アプリケーションをデバッグできます。

  • 構成ファイルでデバッグを有効にします。

  • サーバーのトレースを使用します。

  • Sys.Debug クラスのメソッドを使用して、ブレークポイントを設定し、トレース出力を処理します。

  • ブラウザでデバッグを有効にします。

  • Visual Studio 2008 デバッガを Internet Explorer インスタンスにアタッチするか、外部ツールを使用して他のブラウザでデバッグします。

  • 外部ツールを使用して HTTP トラフィックをキャプチャします。

ページのトップへ

背景

ASP.NET AJAX アーキテクチャには、リリース モードとデバッグ モードのモデルが用意されています。リリース モードでは、エラー チェックとパフォーマンスを最適化するための例外処理が行われ、スクリプト サイズは最小限に抑えられます。デバッグ モードには、型チェックや引数チェックなど、より厳密なデバッグ機能が用意されています。クライアント スクリプト ファイルまたはスクリプト リソースのデバッグ バージョンを作成すると、アプリケーションがデバッグ モードのときに ASP.NET はデバッグ バージョンを実行します。これによりデバッグ スクリプトで例外をスローできますが、リリース コードのサイズは引き続き最小限に抑えられます。

デバッグ ヘルパー クラスである Sys.Debug は、Web ページの末尾に読み取り可能な形式でオブジェクトを表示するためのメソッドを提供します。また、トレース メッセージも表示され、ユーザーはアサーションを使用し、デバッガを中断できます。拡張された Error オブジェクト API により、リリース モードとデバッグ モードをサポートする有用な例外詳細が提供されます。

次のセクションでは、デバッグとトレースに使用できる方法とツールの詳細について説明します。

デバッグ用のアプリケーションの構成

デバッグを有効にするには、サイトのルート Web.config ファイルに compilation 要素を追加し、その debug 属性を true に設定します。詳細については、「compilation 要素 (ASP.NET 設定スキーマ)」を参照してください。

デバッグ用に設定された debug 属性が存在する Web.config ファイルのセクションの例を次に示します。

<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 コントロールを含む Web ページで、ScriptMode プロパティが Release に設定されていることを確認します。

@ Page ディレクティブの debug 属性は、ASP.NET AJAX アプリケーションには影響しません。ScriptManager コントロールは、Web.config ファイルと IsDebuggingEnabled プロパティおよび ScriptMode プロパティの設定のみを使用して、デバッグ スクリプトをレンダリングするかどうかを判断します。

サーバーのトレース

サーバーのトレースを使用して、部分ページ レンダリングが有効になっている Web ページをデバッグする場合、トレース ビューア (Trace.axd) を使用してトレース出力を表示する必要があります。ページの末尾にトレース出力を追加できます。このトレース出力は、ページを最初にレンダリングしたときに表示されます。ただし、更新が必要な UpdatePanel コントロールの内容のみが変更されるため、非同期ポストバックの結果としてトレース出力は更新されません。トレース ビューアの使い方の詳細については、「ASP.NET トレースの概要」を参照してください。

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

EnablePartialRendering プロパティが true に設定された ScriptManager コントロールがページに含まれている場合、部分ページ レンダリングが有効になっています。ページには、1 つ以上の UpdatePanel コントロールも必要です。

ヘルパー クラスのデバッグ

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" runat="server">
    <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" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <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" runat="server">
    <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" runat="server">
    <h2>Sys.Debug Methods Test Page</h2>
    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" />
    <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 でデバッグを有効にするには

  1. [ツール] メニューの [インターネット オプション] をクリックします。

  2. [詳細設定] タブで、[スクリプトのデバッグを使用しない (Internet Explorer)] チェック ボックスと [スクリプトのデバッグを使用しない (その他)] チェック ボックスをオフにします。

  3. [スクリプト エラーごとに通知を表示する] チェック ボックスをオンにします。

  4. "簡易" エラー メッセージをオフにするには、[HTTP エラー メッセージを簡易表示する] チェック ボックスをオフにします。

    "簡易" エラー メッセージが有効で、サーバーからの HTTP 500 エラー応答の長さが 513 バイト未満の場合、Internet Explorer はコンテンツをマスクします。Internet Explorer では、エラー情報の代わりに、開発者ではなくエンド ユーザーを対象にしたメッセージが表示されます。

Internet Explorer への Visual Studio Debugger のアタッチ

クライアント スクリプトをデバッグするには、デバッガを Internet Explorer にアタッチする必要があります。Visual Studio では、デバッグ用のアプリケーションを起動すると (F5 キーを押すか、[デバッグ] メニューの [デバッグ開始] コマンドを使用)、デバッガが自動的にアタッチされます。

アプリケーションが既に実行されているときに、Internet Explorer に Visual Studio デバッガをアタッチすることもできます。これを行うには、[デバッグ] メニューの [プロセスにアタッチ] をクリックします。[プロセスにアタッチ] ダイアログ ボックスで、デバッガをアタッチする Internet Explorer (iexplore.exe) のインスタンスを選択します。

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

Internet Explorer がデバッグ用に構成されている場合、Internet Explorer の関連インスタンスの [種類] 列に [Script, x86] と表示されます。[種類] 列に [x86] のみが表示される場合は、Internet Explorer がデバッグ用に構成されていることを確認します。

Internet Explorer がスクリプト エラーを検出し、スクリプト デバッグ用に構成されていて、現在デバッガにアタッチされていない場合、ブラウザはデバッガを選択するように求めるプロンプトを表示します。デバッグなしで続行するか、デバッガをアタッチしてコードをステップ実行できます。

Internet Explorer のデバッグに関する既知の問題と回避策

Internet Explorer を使用する ASP.NET AJAX アプリケーションをデバッグする場合、次の問題と回避策に注意してください。

  • Visual Studio デバッガを Internet Explorer にアタッチした後、デバッグされているスクリプトの一覧を [スクリプト エラー] ウィンドウに表示できます (このウィンドウを表示するには、[デバッグ] メニューの [ウィンドウ] をクリックし、[スクリプト エクスプローラ] をクリックします)。ASP.NET AJAX クライアント ライブラリは、ScriptResource.axd?... で始まるリソースとして表示されます。これは、サーバーによって ASP.NET AJAX アセンブリから動的に生成されます。Visual Studio の既知の問題により、ファイルを開くことができない可能性があります。Visual Studio がそれを知らせるエラー メッセージを表示した場合、またはファイル名のクリックを無視した場合は、開いているスクリプト ファイルをすべて閉じます。これで、ページを開き、デバッグするスクリプト ファイルを選択できます。

  • デバッガが ASP.NET ページの JavaScript コードにステップ インするまで、そのページの script 要素内の JavaScript スクリプトにブレークポイントを設定することはできません。この問題を回避するには、呼び出し元の関数にブレークポイントを設定し、ASP.NET Web ページのコードにステップ インします。デバッガがページの JavaScript コードの行で停止した後、通常どおりにブレークポイントを設定できます。Sys.Debug.fail メソッドを呼び出す ASP.NET ページ ファイル内にメソッドを作成して、ASP.NET ページ内のスクリプトをデバッガに認識させることもできます。このメソッドを呼び出すと、デバッガは Sys.Debug.fail の呼び出しで停止し、ユーザーは他の場所にブレークポイントを設定できます。すべてのカスタム コードを外部の JavaScript ファイルに配置することもできます。

  • Visual Studio を使用すると、通常の JavaScript 関数の最初の行にブレークポイントを設定できますが、AJAX ライブラリで ASP.NET が使用する匿名メソッドの最初の行には設定できません。匿名メソッドに 1 行のみのコードが含まれる場合、または匿名メソッドの最初の行にブレークポイントを設定する必要がある場合は、ダミー コードの行を挿入します。これで、メソッドの 2 行目にブレークポイントを設定できます。

IIS 7.0 の既知の問題

Windows Vista 上の IIS 7.0 を使用して ASP.NET AJAX 対応のページを実行するときに、マネージ パイプライン モードが Integrated に設定されている場合は、ScriptResourceHandler クラスによって処理されるスクリプトはキャッシュされません。ただし、マネージ パイプライン モードが Classic に設定されている場合は、スクリプトはキャッシュされます。

IIS 7.0 のマネージ パイプライン モードの詳細については、「Upgrading ASP.NET Applications to IIS 7.0: Differences between IIS 7.0 Integrated Mode and Classic Mode」を参照してください。

HTTP トラフィックのキャプチャ

Web アプリケーションを開発する場合、サーバーとクライアント間の HTTP トラフィックを監視すると便利です。このタスクを実行できるツールは Fiddler です。Fiddler は、MSDN Web サイト上の Fiddler PowerToy ページから入手できます。Fiddler は、すべての 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 とも連携します。ただし、ローカル コンピュータのポート 8888 で実行されているプロキシに HTTP 要求をルーティングするように Firefox を構成する必要があります。詳細については、Fiddler の Web サイトの「Configuring Clients」ページを参照してください。

ページのトップへ

クラス リファレンス

  • Sys.Debug クラス
    ブレークポイントを定義し、トレース出力を処理するメソッドを提供します。

ページのトップへ

参照

処理手順

コンポーネント ライブラリのリソースのローカライズの概要

概念

ASP.NET AJAX の概要

AJAX およびクライアント機能の追加