ASP.NET AJAX デバッグ機能について理解する
作成者: Scott Cate
コードをデバッグできることは、使用しているテクノロジに関係なく、すべての開発者が自分のスキルの 1 つとして持つ必要がある能力です。 多くの開発者は、VB.NET または C# コードを使用する ASP.NET アプリケーションをデバッグするために Visual Studio .NET または Web Developer Express を使用することには慣れていますが、JavaScript などのクライアント側コードのデバッグにも非常に役立つことを認識していない開発者もいます。 .NET アプリケーションのデバッグに使用されるのと同じ種類の手法を、AJAX 対応アプリケーションに、より具体的には ASP.NET AJAX アプリケーションに適用することもできます。
ASP.NET アプリケーションおよび AJAX アプリケーションのデバッグ
Dan Wahlin
コードをデバッグできることは、使用しているテクノロジに関係なく、すべての開発者が自分のスキルの 1 つとして持つ必要がある能力です。 使用できるさまざまなデバッグ オプションを理解すると、プロジェクトの多大な時間を節約でき、おそらくいくつかの頭痛の種から逃れられることは言うまでもありません。 多くの開発者は、VB.NET または C# コードを使用する ASP.NET アプリケーションをデバッグするために Visual Studio .NET または Web Developer Express を使用することには慣れていますが、JavaScript などのクライアント側コードのデバッグにも非常に役立つことを認識していない開発者もいます。 .NET アプリケーションのデバッグに使用されるのと同じ種類の手法を、AJAX 対応アプリケーションに、より具体的には ASP.NET AJAX アプリケーションに適用することもできます。
この記事では、Visual Studio 2008 やその他のいくつかのツールを使用して ASP.NET AJAX アプリケーションをデバッグし、バグやその他の問題をすばやく特定する方法について説明します。 ここでは、Internet Explorer 6 以降でデバッグを有効にする方法、Visual Studio 2008 とスクリプト エクスプローラーを使用してコードをステップ実行する方法の他、Web 開発ヘルパーなどの他の無料ツールを使用する方法について説明します。 また、Firebug という名前の拡張機能を使用して Firefox で ASP.NET AJAX アプリケーションをデバッグする方法についても説明します。これにより、他のツールを使用せずに、ブラウザーで JavaScript コードを直接ステップ実行できます。 最後に、トレースやコード アサート ステートメントなどのさまざまなデバッグ タスクに役立つ、ASP.NET AJAX ライブラリのクラスについて説明します。
Internet Explorer で表示されるページをデバッグする前に、デバッグ用に有効にするために実行する必要がある基本的な手順がいくつかあります。 開始するために実行する必要がある基本的なセットアップ要件を見てみましょう。
デバッグ用の Internet Explorer の構成
ほとんどのユーザーは、Internet Explorer で表示された Web サイトで発生した JavaScript の問題を見ることに関心がありません。 実際、平均的なユーザーは、エラー メッセージが表示された場合に何をすべきかさえ知りません。 その結果、ブラウザーでは、既定でデバッグ オプションがオフになっています。 しかし、デバッグを有効にして、新しい AJAX アプリケーションを開発するときに使用するのは非常に簡単です。
デバッグ機能を有効にするには、Internet Explorer メニューの [ツール]、[インターネット オプション] の順に移動し、[詳細設定] タブを選択します。[ブラウズ] セクション内で、次の項目がオフになっていることを確認します。
- スクリプトのデバッグを使用しない (Internet Explorer)
- スクリプト デバッグを使用しない (その他)
必須ではありませんが、アプリケーションをデバッグしようとしている場合は、ページ内の JavaScript エラーをすぐに表示し、明らかにしたい可能性があります。 [スクリプト エラーごとに通知を表示する] チェック ボックスをオンにすると、メッセージ ボックスですべてのエラーを強制的に表示できます。 これはアプリケーションを開発している間にオンにするのに最適なオプションですが、JavaScript エラーにはかなりの確立で遭遇するため、他の Web サイトを閲覧している場合はすぐに邪魔に感じるかもしれません。
図 1 は、デバッグ用に適切に構成された Internet Explorer の詳細ダイアログがどのようになるかを示しています。
図 1: Internet Explorer のデバッグ用の構成。 (クリックするとフルサイズの画像が表示されます)
デバッグが有効になると、[表示] メニューに [Script Debugger]\(スクリプト デバッガー\) という名前の新しいメニュー項目が表示されます。 [開く] と [Break at Next Statement]\(次のステートメントで中断\) の 2 つのオプションがあります。 [開く] を選択すると、Visual Studio 2008 でページをデバッグするように求められます (Visual Web Developer Express もデバッグに使用できることに注意してください)。 Visual Studio .NET が現在実行されている場合は、そのインスタンスを使用するか、新しいインスタンスを作成することを選択できます。 [Break at Next Statement]\(次のステートメントで中断\) を選択すると、JavaScript コードの実行時にページをデバッグするように求められます。 ページの onLoad イベントで JavaScript コードが実行される場合は、ページを更新してデバッグ セッションをトリガーできます。 ボタンをクリックした後に JavaScript コードが実行される場合は、ボタンがクリックされた直後にデバッガーが実行されます。
Note
ユーザー アクセス制御 (UAC) が有効になっている Windows Vista で実行していて、管理者として実行するように Visual Studio 2008 が設定されている場合、アタッチを求められたときに、Visual Studio はプロセスへのアタッチに失敗します。 この問題を回避するには、まず Visual Studio を起動し、そのインスタンスを使用してデバッグします。
次のセクションでは、Visual Studio 2008 内から ASP.NET AJAX ページを直接デバッグする方法を示しますが、Internet Explorer スクリプト デバッガー オプションを使用すると、ページが既に開いているときに、より詳しく検査したい場合に便利です。
Visual Studio 2008 を使用したデバッグ
Visual Studio 2008 には、世界中の開発者が .NET アプリケーションのデバッグに日常的に使用するデバッグ機能があります。 組み込みのデバッガーを使用すると、コードのステップ実行、オブジェクト データの表示、特定の変数の監視、呼び出し履歴の監視などの他にも多くのタスクを実行できます。 デバッガーを使用すると、VB.NET または C# コードのデバッグに加えて、ASP.NET AJAX アプリケーションのデバッグにも役立ち、JavaScript コードを 1 行ずつステップ実行できます。 以下の詳細は、Visual Studio 2008 を使用してアプリケーションをデバッグする全体的なプロセスについて説明するのではなく、クライアント側のスクリプト ファイルをデバッグするために使用できる手法に焦点を当てています。
Visual Studio 2008 でページをデバッグするプロセスは、さまざまな方法で開始できます。 まず、前のセクションで説明した Internet Explorer スクリプト デバッガー オプションを使用できます。 これは、ページが既にブラウザーに読み込まれており、そのページでデバッグを開始する場合に適切に機能します。 または、ソリューション エクスプローラーで .aspx ページを右クリックし、メニューから [スタート ページとして設定] を選択することもできます。 ASP.NET ページのデバッグに慣れている場合は、おそらく前にこれを行ったことがあるでしょう。 F5 キーを押すと、ページをデバッグできます。 ただし、通常、VB.NET または C# コードで任意の場所にブレークポイントを設定できますが、次に示すように JavaScript では必ずしもそうであるとは限りません。
埋め込みスクリプトと外部スクリプト
Visual Studio 2008 デバッガーは、ページに埋め込まれた JavaScript について、外部 JavaScript ファイルとは別の扱いをします。 外部スクリプト ファイルの場合は、ファイルを開き、任意の行にブレークポイントを設定できます。 ブレークポイントは、コード エディター ウィンドウの左側にある灰色のトレイ領域をクリックして設定できます。 <script> タグを使用して JavaScript をページに直接埋め込む場合、灰色のトレイ領域をクリックしてブレークポイントを設定することはできません。 埋め込みスクリプトの行にブレークポイントを設定しようとすると、この場所がブレークポイントの有効な場所ではないことを通知する警告が表示されます。
この問題を回避するには、コードを外部の .js ファイルに移動し、<スクリプト> タグの src 属性を使用して参照します。
<script type="text/javascript" src="Scripts/YourScript.js"></script>
コードを外部ファイルに移動することができない場合や、その価値よりも多くの作業が必要な場合はどうでしょうか。 エディターを使用してブレークポイントを設定することはできませんが、デバッグを開始するコードにデバッガー ステートメントを直接追加できます。 ASP.NET AJAX ライブラリで使用できる Sys.Debug クラスを使用して、デバッグを強制的に開始することもできます。 Sys.Debug クラスの詳細については、この記事の後半で説明します。
debugger キーワードを使用する例をリスト 1 に示します。 この例では、更新関数の呼び出しが行われる直前にデバッガーを強制的に中断します。
リスト 1。 デバッガー キーワードを使用して Visual Studio .NET デバッガーを強制的に中断する。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
debugger;
UpdatePerson(person);
}
デバッガー ステートメントがヒットすると、Visual Studio .NET を使用してページをデバッグするように求めるメッセージが表示され、コードのステップ実行を開始できます。 これを行う際に、ページで使用されている ASP.NET AJAX ライブラリ スクリプト ファイルへのアクセスに問題が発生する可能性があるため、Visual Studio .NET のスクリプト エクスプローラーの使用を見てみましょう。
Visual Studio .NET Windows を使用したデバッグ
デバッグ セッションが開始され、既定の F11 キーを使用してコードの操作を開始すると、ページで使用されているすべてのスクリプト ファイルが開いていてデバッグに使用できない限り、図 2 に示すエラー ダイアログが表示されることがあります。
図 2: デバッグに使用できるソース コードがない場合に表示されるエラー ダイアログ。 (クリックするとフルサイズの画像が表示されます)
このダイアログが表示されるのは、Visual Studio .NET でページによって参照される一部のスクリプトのソース コードを取得する方法がわからないためです。 これには、最初は非常にストレスを感じる可能性がありますが、簡単な修正方法があります。 デバッグ セッションを開始してブレークポイントにヒットしたら、Visual Studio 2008 メニューの [Windows のデバッグ] スクリプト エクスプローラー ウィンドウに移動するか、Ctrl + Alt + N ホットキーを使用します。
Note
[スクリプト エクスプローラー] メニューが一覧に表示されない場合は、Visual Studio .NET メニューの [ツール]>[カスタマイズ]>[コマンド] に移動します。 [カテゴリ] セクションで [デバッグ] エントリを見つけてクリックすると、使用可能なすべてのメニュー エントリが表示されます。 [コマンド] の一覧で、スクリプト エクスプローラーまで下にスクロールし、前述の [Windows のデバッグ] メニュー上にドラッグします。 これを行うと、Visual Studio .NET を実行するたびにスクリプト エクスプローラーのメニュー エントリを使用できるようになります。
スクリプト エクスプローラーを使用すると、ページで使用されているすべてのスクリプトを表示し、コード エディターで開くことができます。 スクリプト エクスプローラーが開いたら、現在デバッグ中の .aspx ページをダブルクリックして、コード エディター ウィンドウで開きます。 スクリプト エクスプローラーに表示されている他のすべてのスクリプトに対して同じアクションを実行します。 すべてのスクリプトがコード ウィンドウで開いたら、F11 キーを押して (他のデバッグ ホットキーを使用して) コードをステップ実行できます。 図 3 は、スクリプト エクスプローラーの例を示しています。 デバッグ中の現在のファイル (Demo.aspx) と、2 つのカスタム スクリプトと、ASP.NET AJAX ScriptManager によってページに動的に挿入される 2 つのスクリプトが一覧表示されます。
図 3。 スクリプト エクスプローラーを使用すると、ページで使用されるスクリプトに簡単にアクセスできます。 (クリックするとフルサイズの画像が表示されます)
他のいくつかのウィンドウを使用して、ページ内のコードをステップ実行するときに役立つ情報を提供することもできます。 たとえば、[ローカル] ウィンドウを使用すると、ページで使用されるさまざまな変数の値を確認できます。[イミディエイト] ウィンドウでは、特定の変数または条件を評価し、出力を表示できます。 [出力] ウィンドウを使用して、Sys.Debug.trace 関数 (この記事で後述) または Internet Explorer の Debug.writeln 関数を使用して書き出されたトレース ステートメントを表示することもできます。
デバッガーを使用してコードをステップ実行するときに、コード内の変数の上にマウス ポインターを置くと、割り当てられている値を表示できます。 ただし、特定の JavaScript 変数の上にマウス ポインターを置いても、スクリプト デバッガーに何も表示されない場合があります。 値を表示するには、コード エディター ウィンドウで表示しようとしているステートメントまたは変数を強調表示し、その上にマウス ポインターを置きます。 この手法はすべての状況で機能するわけではありませんが、多くの場合、[ローカル] ウィンドウなどの別のデバッグ ウィンドウを見なくても値を確認できます。
ここで説明する機能の一部を示すビデオ チュートリアルを http://www.xmlforasp.net で見ることができます。
Web 開発ヘルパーを使用したデバッグ
Visual Studio 2008 (および Visual Web Developer Express 2008) は非常に優れたデバッグ ツールですが、より軽量で使用可能なオプションが他にもあります。 リリースされる最新のツールの 1 つに、Web 開発ヘルパーがあります。 Microsoft の Nikhil Kothari (Microsoft の ASP.NET AJAX キー設計者の 1 人) が、単純なデバッグから HTTP 要求と応答メッセージの表示まで、さまざまなタスクを実行できるこの優れたツールを記述しました。
Web 開発ヘルパーは Internet Explorer 内で直接使用できて便利です。 まず、Internet Explorer メニューから [ツール]、[Web Development Helper]\(Web 開発ヘルパー\) の順に選択します。 これにより、ブラウザーの下部にあるツールが開きます。これは、HTTP 要求や応答メッセージのログ記録などのいくつかのタスクを実行するためにブラウザーを離れる必要がないため便利です。 図 4 は、実際の Web 開発ヘルパーを示しています。
図 4: Web 開発ヘルパー (クリックするとフルサイズの画像が表示されます)
Web 開発ヘルパーは、Visual Studio 2008 のように、コードを 1 行ずつステップ実行するために使用するツールではありません。 ただし、トレース出力を表示したり、スクリプト内の変数を簡単に評価したり、JSON オブジェクト内のデータを探索したりするために使用できます。 また、ASP.NET AJAX ページとサーバーとの間で送受信されるデータを表示する場合にも非常に便利です。
Internet Explorer で Web 開発ヘルパーを開いたら、図 4 で前に示したように、Web 開発ヘルパーのメニューから [スクリプト]、[スクリプト デバッグを有効にする] を選択してスクリプト デバッグを有効にする必要があります。 これにより、ページの実行時に発生したエラーをツールでインターセプトできます。 また、ページに出力されるトレース メッセージに簡単にアクセスすることもできます。 トレース情報を表示したり、スクリプト コマンドを実行してページ内のさまざまな関数をテストしたりするには、Web 開発ヘルパーのメニューから [スクリプト]、[Show Script Console]\(スクリプト コンソールの表示\) を選択します。 これにより、コマンド ウィンドウと簡単なイミディエイト ウィンドウにアクセスできます。
トレース メッセージと JSON オブジェクト データの表示
イミディエイト ウィンドウを使用すると、スクリプト コマンドを実行したり、ページ内のさまざまな関数をテストするために使用されるスクリプトを読み込んだり保存したりできます。 コマンド ウィンドウには、表示されているページによって書き出されたトレース メッセージまたはデバッグ メッセージが表示されます。 リスト 2 は、Internet Explorer の Debug.writeln 関数を使用してトレース メッセージを書き込む方法を示しています。
リスト 2。 Debug クラスを使用してクライアント側トレース メッセージを書き出す。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
Debug.writeln("Person name: " + person.LastName);
UpdatePerson(person);
}
LastName プロパティに値 Doe が含まれている場合、Web 開発ヘルパーはスクリプト コンソールのコマンド ウィンドウに "Person name: Doe" というメッセージを表示します (デバッグが有効になっていると仮定)。 また、Web 開発ヘルパーは、トレース情報の書き込みや JSON オブジェクトの内容の表示に使用できる最上位の debugService オブジェクトをページに追加します。 リスト 3 は、debugService クラスのトレース関数の使用例を示しています。
リスト 3。 Web 開発ヘルパーの debugService クラスを使用してトレース メッセージを書き込む。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.trace("Person name: " + person.LastName);
}
UpdatePerson(person);
}
debugService クラスの優れた機能は、Internet Explorer でデバッグが有効になっていない場合でも機能することで、Web 開発ヘルパーの実行時に常にトレース データに簡単にアクセスできます。 ツールがページのデバッグに使用されていない場合、window.debugService の呼び出しから false が返されるため、トレース ステートメントは無視されます。
debugService クラスでは、Web 開発ヘルパーのインスペクター ウィンドウを使用して JSON オブジェクト データを表示することもできます。 リスト 4 では、person データを含む単純な JSON オブジェクトが作成されます。 オブジェクトが作成されると、debugService クラスの inspect 関数が呼び出され、JSON オブジェクトを視覚的に検査できるようになります。
リスト 4。 debugService.inspect 関数を使用して JSON オブジェクト データを表示する。
function BuildPerson()
{
var person =
{
FirstName: $get("txtFirstName").value,
LastName: $get("txtLastName").value,
Address:
{
Street: $get("txtStreet").value,
City: $get("txtCity").value,
State: $get("txtState").value
}
};
if (window.debugService)
{
window.debugService.inspect("Person Object",person);
}
UpdatePerson(person);
}
ページまたはイミディエイト ウィンドウで GetPerson() 関数を呼び出すと、図 5 に示すように [Object Inspector]\(オブジェクト インスペクター\) ダイアログ ウィンドウが表示されます。 オブジェクト内のプロパティを動的に変更するには、プロパティを強調表示し、[値] テキスト ボックスに表示される値を変更し、[更新] リンクをクリックします。 オブジェクト インスペクターを使用すると、JSON オブジェクト データを簡単に表示し、さまざまな値をプロパティに適用する実験を行うことができます。
エラーのデバッグ
Web 開発ヘルパーは、トレース データと JSON オブジェクトの表示を許可するだけでなく、ページ内のエラーのデバッグにも役立ちます。 エラーが発生した場合は、次のコード行に進むか、スクリプトをデバッグするように求められます (図 6 を参照)。 [スクリプト エラー] ダイアログ ウィンドウには、完全な呼び出し履歴と行番号が表示されるため、スクリプト内の問題の場所を簡単に特定できます。
図 5: オブジェクト インスペクター ウィンドウを使用して JSON オブジェクトを表示する。 (クリックするとフルサイズの画像が表示されます)
デバッグ オプションを選択すると、Web 開発ヘルパーのイミディエイト ウィンドウでスクリプト ステートメントを直接実行して、変数の値を表示したり、JSON オブジェクトを書き出したりすることができます。 エラーをトリガーしたのと同じアクションが再度実行され、Visual Studio 2008 がコンピューターで使用可能な場合は、前のセクションで説明したように、コードを 1 行ずつステップ実行できるように、デバッグ セッションを開始するように求められます。
図 6: Web 開発ヘルパーのスクリプト エラー ダイアログ (クリックするとフルサイズの画像が表示されます)
要求メッセージと応答メッセージの検査
ASP.NET AJAX ページをデバッグするときに、ページとサーバーの間で送信された要求メッセージと応答メッセージを表示すると便利です。 メッセージ内のコンテンツを表示すると、メッセージのサイズだけでなく、適切なデータが渡されているかどうかを確認できます。 Web 開発ヘルパーは、データを生テキストまたは読みやすい形式で簡単に表示できる優れた HTTP メッセージ ロガー機能を提供します。
ASP.NET AJAX 要求メッセージと応答メッセージを表示するには、Web 開発ヘルパーのメニューから [HTTP]、[Enable HTTP Logging]\(HTTP ログの有効化\) を選択して HTTP ロガーを有効にする必要があります。 有効にすると、現在のページから送信されたすべてのメッセージを HTTP ログ ビューアーで表示できます。これには、[HTTP]、[Show HTTP Logs]\(HTTP ログの表示\) を選択してアクセスできます。
各要求/応答メッセージで送信された生テキストの表示は確かに便利ですが (Web 開発ヘルパーのオプション)、多くの場合、メッセージ データをよりグラフィカルな形式で表示する方が簡単なこともあります。 HTTP ログが有効になり、メッセージがログに記録されたら、HTTP ログ ビューアーでメッセージをダブルクリックしてメッセージ データを表示できます。 これにより、メッセージに関連付けられているすべてのヘッダーと、実際のメッセージの内容を表示できます。 図 7 は、HTTP ログ ビューアーのウィンドウに表示された要求メッセージと応答メッセージの例を示しています。
図 7: HTTP ログ ビューアーを使用して要求と応答のメッセージ データを表示する。 (クリックするとフルサイズの画像が表示されます)
HTTP ログ ビューアーでは、JSON オブジェクトが自動的に解析され、ツリー ビューを使用して表示されるため、オブジェクトのプロパティ データをすばやく簡単に表示できます。 UpdatePanel が ASP.NET AJAX ページで使用されている場合、図 8 に示すように、ビューアーはメッセージの各部分を個別の部分に分割します。 これは、生メッセージ データの表示と比較して、メッセージ内の内容をはるかに簡単に確認して理解できるようにする優れた機能です。
図 8: HTTP ログ ビューアーを使用して表示された UpdatePanel 応答メッセージ。 (クリックするとフルサイズの画像が表示されます)
Web 開発ヘルパーに加えて、他にも、要求メッセージと応答メッセージを表示するために使用できるいくつかのツールがあります。 http://www.fiddlertool.com で無料で提供されている Fiddler は、もう一つの良いオプションです。 Fiddler についてはここでは説明しませんが、これも、メッセージ ヘッダーとデータを十分に検査する必要がある場合に適したオプションです。
Firefox と Firebug を使用したデバッグ
Internet Explorer はまだ最も広く使用されているブラウザーですが、Firefox などの他のブラウザーも非常に人気があり、ますます使用されています。 その結果、アプリケーションが正常に動作するように、Firefox と Internet Explorer で ASP.NET AJAX ページを表示およびデバッグする必要があります。 デバッグのために、Firefox を Visual Studio 2008 に直接関連付けることはできませんが、ページのデバッグに使用できる Firebug という拡張機能があります。 Firebug は、http://www.getfirebug.com から無料でダウンロードできます。
Firebug が提供するフル機能のデバッグ環境では、コードを 1 行ずつステップ実行し、ページ内で使用されるすべてのスクリプトにアクセスし、DOM 構造を表示し、CSS スタイルを表示し、ページで発生するイベントを追跡できます。 インストール後、Firefox メニューから [ツール]、[Firebug]、[Open Firebug]\(Firebug を開く\) を選択して Firebug にアクセスできます。 Web 開発ヘルパーと同様に、Firebug はブラウザーで直接使用されますが、スタンドアロン アプリケーションとしても使用できます。
Firebug が実行されると、スクリプトがページに埋め込まれているかどうかにかかわらず、JavaScript ファイルの任意の行にブレークポイントを設定できます。 ブレークポイントを設定するには、まず Firefox でデバッグする適切なページを読み込みます。 ページが読み込まれたら、Firebug のスクリプト ドロップダウン リストからデバッグするスクリプトを選択します。 ページで使用されるすべてのスクリプトが表示されます。 ブレークポイントは、Visual Studio 2008 の場合と同様に、ブレークポイントを配置する必要がある Firebug の行の灰色のトレイ領域をクリックすることによって設定されます。
Firebug でブレークポイントが設定されたら、ボタンをクリックしたり、ブラウザーを更新して onLoad イベントをトリガーしたりするなど、デバッグする必要があるスクリプトの実行に必要なアクションを実行できます。 実行は、ブレークポイントを含む行で自動的に停止します。 図 9 は、Firebug でトリガーされたブレークポイントの例を示しています。
図 9: Firebug でのブレークポイントの処理。 (クリックするとフルサイズの画像が表示されます)
ブレークポイントにヒットしたら、矢印ボタンを使用して、コードにステップ イン、ステップ オーバー、またはステップ アウトできます。 コードをステップ実行すると、デバッガーの右側にスクリプト変数が表示され、値を表示してオブジェクトにドリルダウンできます。 Firebug には、デバッグ中の現在の行に至る原因となったスクリプトの実行手順を表示する [Call Stack]\(呼び出し履歴\) ドロップダウン リストも含まれています。
Firebug には、さまざまなスクリプト ステートメントのテスト、変数の評価、トレース出力の表示に使用できるコンソール ウィンドウも含まれています。 これには、Firebug ウィンドウの上部にある [コンソール] タブをクリックしてアクセスします。 [検査] タブをクリックして、デバッグ中のページを "検査" して DOM の構造と内容を確認することもできます。インスペクター ウィンドウに表示されているさまざまな DOM 要素の上にマウス ポインターを置くと、ページの適切な部分が強調表示され、要素がページ内のどこで使用されているかを簡単に確認できます。 特定の要素に関連付けられている属性値を "ライブ" に変更して、さまざまな幅やスタイルなどを要素に適用する実験を行うことができます。 これは、単純な変更がページに与える影響を確認するために、ソース コード エディターと Firefox ブラウザーを常に切り替える必要がないという便利な機能です。
図 10 は、DOM インスペクターを使用して、ページ内で txtCountry という名前のテキスト ボックスを見つける例を示しています。 Firebug インスペクターを使用すると、ページで使用される CSS スタイルや、マウスの動きの追跡、ボタンのクリックなどの発生するイベントを表示することもできます。
図 10: Firebug の DOM インスペクターの使用。 (クリックするとフルサイズの画像が表示されます)
Firebug は、Firefox でページを直接すばやくデバッグするための軽量な方法であり、ページ内のさまざまな要素を検査するための優れたツールです。
ASP.NET AJAX でのデバッグ サポート
ASP.NET AJAX ライブラリには、Web ページに AJAX 機能を追加するプロセスを簡略化するために使用できるさまざまなクラスが含まれています。 これらのクラスを使用すると、ページ内の要素を特定して操作し、新しいコントロールを追加し、Web サービスを呼び出し、イベントを処理できます。 ASP.NET AJAX ライブラリには、ページのデバッグ プロセスを強化するために使用できるクラスも含まれています。 このセクションでは、Sys.Debug クラスについて説明し、アプリケーションで使用する方法について説明します。
Sys.Debug クラスの使用
Sys.Debug クラス (Sys 名前空間にある JavaScript クラス) を使用すると、トレース出力の書き込み、コード アサーションの実行、コードの失敗を強制してデバッグを実行するなど、いくつかの異なる関数を実行できます。 これは、ASP.NET AJAX ライブラリのデバッグ ファイル (C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 に既定でインストール) で広く使用されています。その目的は、パラメーターが関数に適切に渡されることや、オブジェクトに予期されるデータが含まれていることを確認し、トレース ステートメントを書き込むための条件付きテスト (アサーションと呼ばれます) を実行することです。
Sys.Debug クラスは、表 1 に示すように、トレース、コード アサーション、またはエラーを処理するために使用できるいくつかの異なる関数を公開しています。
表 1 Sys.Debug クラス関数。
| 関数名 | 説明 |
|---|---|
| assert(condition, message, displayCaller) | 条件パラメーターが true であることをアサートします。 テスト中の条件が false の場合、メッセージ ボックスを使用してメッセージ パラメーター値が表示されます。 displayCaller パラメーターが true の場合、メソッドは呼び出し元に関する情報も表示します。 |
| clearTrace() | トレース操作から出力されたステートメントを消去します。 |
| fail(message) | プログラムの実行を停止し、デバッガーで中断します。 メッセージ パラメーターを使用して、エラーの理由を指定できます。 |
| trace(message) | メッセージ パラメーターをトレース出力に書き込みます。 |
| traceDump(object, name) | オブジェクトのデータを読み取り可能な形式で出力します。 name パラメーターを使用して、トレース ダンプのラベルを指定できます。 ダンプされるオブジェクト内のすべてのサブオブジェクトは、既定で書き出されます。 |
クライアント側トレースは、ASP.NET で使用できるトレース機能とほぼ同じ方法で使用できます。 これにより、アプリケーションのフローを中断することなく、さまざまなメッセージを簡単に表示できます。 リスト 5 は、Sys.Debug.trace 関数を使用してトレース ログに書き込む例を示しています。 この関数は、パラメーターとして書き出す必要があるメッセージを受け取るだけです。
リスト 5。 Sys.Debug.trace 関数の使用。
function BuildPerson()
{
var address = new XmlForAsp.Address($get("txtStreet").value, $get("txtCity").value, $get("txtState").value, $get("txtZip").value);
var person = new XmlForAsp.Person(null, $get("txtFirstName").value, $get("txtLastName").value, address);
Sys.Debug.trace("Person's name: " + person.get_firstName() + " " + person.get_lastName());
UpdatePerson(person);
}
リスト 5 に示されているコードを実行すると、ページにトレース出力は表示されません。 表示する唯一の方法は、Visual Studio .NET、Web 開発ヘルパー、または Firebug で使用できるコンソール ウィンドウを使用することです。 ページにトレース出力を表示する場合は、TextArea タグを追加し、次に示すように TraceConsole の ID を指定する必要があります。
<textArea id="TraceConsole" rows="10" cols="50"></textArea>
ページ内のすべての Sys.Debug.trace ステートメントは TraceConsole TextArea に書き込まれます。
JSON オブジェクトに含まれるデータを表示する場合は、Sys.Debug クラスの traceDump 関数を使用できます。 この関数は、トレース コンソールにダンプする必要があるオブジェクトと、トレース出力内のオブジェクトを識別するために使用できる名前を含む 2 つのパラメーターを受け取ります。 リスト 6 は、traceDump 関数の使用例を示しています。
リスト 6。 Sys.Debug.traceDump 関数の使用。
function UpdatePerson(person)
{
//Dump contents of the person object to the trace output
Sys.Debug.traceDump(person,"Person Data");
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
図 11 は、Sys.Debug.traceDump 関数の呼び出しからの出力を示しています。 Person オブジェクトのデータを書き出すだけでなく、Address サブオブジェクトのデータも書き出していることに注意してください。
トレースに加えて、Sys.Debug クラスを使用してコード アサーションを実行することもできます。 アサーションは、アプリケーションの実行中に特定の条件が満たされていることをテストするために使用されます。 ASP.NET AJAX ライブラリ スクリプトのデバッグ バージョンには、さまざまな条件をテストするためのアサート ステートメントがいくつか含まれています。
リスト 7 は、Sys.Debug.assert 関数を使用して条件をテストする例を示しています。 コードは、Person オブジェクトを更新する前に Address オブジェクトが null かどうかをテストします。
図 11: Sys.Debug.traceDump 関数の出力。 (クリックするとフルサイズの画像が表示されます)
リスト 7。 debug.assert 関数の使用。
function UpdatePerson(person)
{
//Check if address is null
Sys.Debug.assert(person.get_address() == null,"Address is null!",true);
alert("Person updated! " + person.get_firstName() + " " + person.get_lastName());
}
評価する条件、アサーションが false を返した場合に表示するメッセージ、呼び出し元に関する情報を表示するかどうかを含む 3 つのパラメーターが渡されます。 アサーションが失敗した場合、メッセージが表示され、3 番目のパラメーターが true の場合は呼び出し元に関する情報が表示されます。 図 12 は、リスト 7 に示されているアサーションが失敗した場合に表示されるエラー ダイアログの例を示しています。
対象となる最後の関数は Sys.Debug.fail です。 スクリプト内の特定の行でコードを強制的に失敗させる場合は、JavaScript アプリケーションで通常使用されるデバッガー ステートメントではなく、Sys.Debug.fail 呼び出しを追加できます。 Sys.Debug.fail 関数は、次に示すように、エラーの理由を表す単一の文字列パラメーターを受け入れます。
Sys.Debug.fail("My forced failure of script.");
図 12: Sys.Debug.assert エラー メッセージ。 (クリックするとフルサイズの画像が表示されます)
スクリプトの実行中に Sys.Debug.fail ステートメントが見つかると、Visual Studio 2008 などのデバッグ アプリケーションのコンソールにメッセージ パラメーターの値が表示され、アプリケーションをデバッグするように求められます。 これが非常に便利なケースの 1 つは、インライン スクリプトで Visual Studio 2008 を使用してブレークポイントを設定できないが、変数の値を調べることができるようにコードを特定の行で停止したい場合です。
ScriptManager コントロールの ScriptMode プロパティについて
ASP.NET AJAX ライブラリには、C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 に既定でインストールされている、デバッグおよびリリース スクリプトのバージョンが含まれています。 デバッグ スクリプトは適切に書式設定され、読みやすく、複数の Sys.Debug.assert 呼び出しが散在しているのに対し、リリース スクリプトでは、全体的なサイズを最小限に抑えるために、空白が取り除かれ、Sys.Debug クラスは控え目に使用されています。
ASP.NET AJAX ページに追加された ScriptManager コントロールは、web.config でコンパイル要素のデバッグ属性を読み取り、読み込むライブラリ スクリプトのバージョンを決定します。 ただし、ScriptMode プロパティを変更することで、デバッグ スクリプトまたはリリース スクリプト (ライブラリ スクリプトまたは独自のカスタム スクリプト) を読み込むかどうかを制御できます。 ScriptMode は、メンバーに Auto、Debug、Release、Inherit を含む ScriptMode 列挙型を受け入れます。
ScriptMode の既定値は Auto です。これは、ScriptManager が web.config のデバッグ属性をチェックすることを意味します。デバッグが false の場合、ScriptManager は ASP.NET AJAX ライブラリ スクリプトのリリース バージョンを読み込みます。 デバッグが true の場合、スクリプトのデバッグ バージョンが読み込まれます。 ScriptMode プロパティを Release または Debug に変更すると、web.config でのデバッグ属性の値に関係なく、ScriptManager に適切なスクリプトが強制的に読み込まれます。リスト 8 は、ScriptManager コントロールを使用して、ASP.NET AJAX ライブラリからデバッグ スクリプトを読み込む例を示しています。
リスト 8。 ScriptManager を使用したデバッグ スクリプトの読み込み。
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug"></asp:ScriptManager>
リスト 9 に示すように、ScriptManager の Scripts プロパティと ScriptReference コンポーネントを使用して、独自のカスタム スクリプトのさまざまなバージョン (デバッグまたはリリース) を読み込むこともできます。
リスト 9。 ScriptManager を使用してカスタム スクリプトを読み込む。
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Debug"/>
</Scripts>
</asp:ScriptManager>
Note
ScriptReference コンポーネントを使用してカスタム スクリプトを読み込む場合は、スクリプトの下部に次のコードを追加して、スクリプトの読み込みが完了したときに ScriptManager に通知する必要があります。
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
リスト 9 に示すコードは、スクリプト マネージャーに対して、ユーザー スクリプトのデバッグ バージョンを検索するように指示するため、Person.js ではなく Person.debug.js を自動的に検索します。 Person.debug.js ファイルが見つからない場合は、エラーが発生します。
ScriptManager コントロールで設定された ScriptMode プロパティの値に基づいてカスタム スクリプトのデバッグ バージョンまたはリリース バージョンを読み込む場合は、ScriptReference コントロールの ScriptMode プロパティを Inherit に設定できます。 これにより、リスト 10 に示すように、ScriptManager の ScriptMode プロパティに基づいて、適切なバージョンのカスタム スクリプトが読み込まれます。 ScriptManager コントロールの ScriptMode プロパティが Debug に設定されているため、Person.debug.js スクリプトが読み込まれ、ページで使用されます。
リスト 10。 カスタム スクリプトの ScriptManager からの ScriptMode の継承。
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Person.js" ScriptMode="Inherit"/>
</Scripts>
</asp:ScriptManager>
ScriptMode プロパティを適切に使用することで、アプリケーションをより簡単にデバッグし、プロセス全体を簡略化できます。 ASP.NET AJAX ライブラリのリリース スクリプトは、デバッグ スクリプトがデバッグ目的で特別に書式設定されている間にコードの書式設定が削除されたため、ステップ実行と読み取りがかなり困難です。
まとめ
Microsoft の ASP.NET AJAX テクノロジは、エンド ユーザーの全体的なエクスペリエンスを向上させる AJAX 対応アプリケーションを構築するための強固な基盤を提供します。 ただし、プログラミング テクノロジと同様に、バグやその他のアプリケーションの問題は確実に発生します。 使用できるさまざまなデバッグ オプションについて知ることで、時間を大幅に節約でき、結果として製品がより安定します。
この記事では、Internet Explorer と Visual Studio 2008、Web 開発ヘルパー、Firebug など、ASP.NET AJAX ページをデバッグするためのさまざまな手法について説明しました。 これらのツールを使用すると、変数データにアクセスし、コード行を 1 行ずつ実行し、トレース ステートメントを表示できるため、デバッグ プロセス全体を簡略化できます。 説明したさまざまなデバッグ ツールに加えて、ASP.NET AJAX ライブラリの Sys.Debug クラスをアプリケーションで使用する方法と、ScriptManager クラスを使用してデバッグ バージョンまたはリリース バージョンのスクリプトを読み込む方法についても説明しました。
経歴
Dan Wahlin (ASP.NET と XML Web サービスの Microsoft MVP) は、インターフェイス テクニカル トレーニング (www.interfacett.com) の .NET 開発インストラクターおよびアーキテクチャ コンサルタントです。 XML for ASP.NET Developers Web サイト (www.XMLforASP.NET) を設立した Dan は、INETA Speaker's Bureau に所属し、いくつかの会議で講演しています。 Dan は、Professional Windows DNA (Wrox)、ASP.NET: Tips、Tutorials and Code (Sams)、ASP.NET 1.1 Insider Solutions、Professional ASP.NET 2.0 AJAX (Wrox)、ASP.NET 2.0 MVP Hacks を共同編集し、XML for ASP.NET Developers (Sams) を記述しました。 Dan は、コードや記事、または本を書いていないときは、作曲やレコーディングを楽しんだり、妻や子供たちと一緒にゴルフやバスケットボールをプレーしています。
Scott Cate は 1997 年から Microsoft Web テクノロジに従事しており、ナレッジ ベース ソフトウェア ソリューションに焦点を当てた ASP.NET ベースのアプリケーションの作成を専門とする myKB.com (www.myKB.com) の社長です。 Scott へのお問い合わせは、メール アドレス scott.cate@myKB.com または彼のブログ ScottCate.com を介して行うことができます。