Internet ExplorerでのASP.NET AJAXのデバッグ

はじめに

　ASP.NET AJAX開発者がアプリケーションを効率よくデバッグしテストするために利用できるツールは数多くあります。たとえば、ASP.NET AJAXスクリプトライブラリには、アサーションを行ったりトレース操作を実行したりするのに使用できるデバッグ機能が用意されています。リクエストメッセージとレスポンスメッセージをインターセプトして表示し、データの問題の究明やAJAXのリクエストメッセージとレスポンスメッセージのサイズの監視を簡単に行うことのできるツールもいくつかあります。本稿では、Internet ExplorerとVisual Studioを使ってJavaScriptをデバッグする方法をいくつか紹介します。ここで紹介するものの他に、ASP.NET AJAXアプリケーションのデバッグプロセスの簡素化に役立つ、Firefoxで利用できるデバッグテクニックもあります。

　JavaScriptのデバッグはなかなか難しい作業だという認識は以前からありましたが、これまで多くの開発者はアプリケーションの動作確認を主にアラート方式のデバッグで行っていました。幸いなことに、バージョン6以降のInternet Explorerには統合デバッグ機能が含まれており、これを使用すると、Visual Studio .NET 2005やMicrosoft Script Debuggerなどのデバッグツールでデバッグセッションを開始して、ASP.NET AJAXコードを1ステップずつ実行することができます（これについては以降のセクションで説明します）。Internet Explorerのデバッグ機能の活用方法を知れば、生産性を高め、バグやその他の問題を突き止めるための時間を大いに減らすことができます。

　バージョン6以降のInternet Explorerのデバッグ機能は既定では無効になっていますが、［ツール］→［インターネットオプション］→［詳細設定］で有効にすることができます。そのためには、［詳細設定］タブで次の2つの項目をオフにする必要があります（オンになっているとデバッグができません）。

• スクリプトのデバッグを使用しない（Internet Explorer）
• スクリプトのデバッグを使用しない（その他）

　さらに、これらの項目の付近にある［スクリプトエラーごとに通知を表示する］チェックボックスをオンにします。こうすると、ページ内でエラーが発生したときに通知を受けるようになります。このボックスをオンにしなければ、ブラウザの左下隅にアイコンが表示されますが、これをクリックしない限り、クライアントサイドのエラーが発生しても気づかない可能性があります。このチェックボックスをオンにすると、ブラウズする他の多くのWebサイトでエラーを見せられるという副作用があります。したがって、自分自身のアプリケーションをデバッグするとき以外はオフにしておくほうがよいかもしれません。

　デバッグを有効にするためのInternet Explorerの［詳細設定］タブの設定を図1に示します。

図1

　Internet Explorerでデバッグを有効にすると、いろいろなテクニックを使ってASP.NET AJAXページをデバッグできるようになります。以降のセクションでは、これらのオプションについて説明していきます。

Internet ExplorerとVisual Studio .NET 2005によるデバッグ

　デバッグセッションを開始する方法は何とおりもあります。最も簡単な方法の1つは、Internet Explorerの組み込みスクリプトデバッグ機能を使用することです。ASP.NET AJAXページのデバッグセッションを開始するには、デバッグしたいページに移動し、Internet Explorerのメニューから［表示］→［スクリプトデバッガ］を選択します（図2を参照）。この方法を使用する場合は、前のセクションの説明に従って、Internet Explorerでデバッグを有効にしておく必要があります。

図2

　図2からわかるように、［開く］と［次のステートメントで中断］という2つのオプションがあります。［開く］を選択した場合は、デバッガとしてVisual Studio .NETの使用を開始するか確認を求められます（図3を参照）。Visual Studio .NETをすでに開いている場合は、デバッグを開始することもできますし、デバッグ用にVisual Studio .NETの新しいインスタンスを開始することもできます。［次のステートメントで中断］を選択した場合は、そのページ内のスクリプト（またはそのページで参照されてるスクリプト）を実行するアクションが行われるまで何も起こりません。Internet Explorerでスクリプトコードが実行されると、Visual Studio .NET Just-In-Timeデバッガを使用するか確認を求められます。

図3

　Visual Studio .NETを開いてデバッグできる状態になっても、ページ内にスクリプトが埋め込まれていると、ブレークポイントを設定することはできません。ブレークポイントを設定しようとすると、Visual Studio .NETのステータスバーの下部に「This is not a valid location for a breakpoint」というメッセージが表示されます。この問題を解決する方法は何通りかあります。まず、デバッグセッションを開始したいコードにJavaScript "debugger" ステートメントを直接追加するという方法が使えます。これは実行時にコード内のその場所でブレークポイントを強制的に発生させるものです。ただし、この目的のためにASP.NET AJAXのSys.Debugクラスがあるので、こちらのほうがAJAXアプリケーションのデバッグに適した選択肢といえます。Sys.Debugクラスのfail関数を呼び出すことにより、コードの特定の行に達したときにデバッガをトリガすることができます。

　Sys.Debug.fail関数のパラメータは1つだけで、このパラメータは障害の理由を表します。リスト1は、Sys.Debug.fail関数を使用して、Albumオブジェクトに歌が追加される直前にデバッグセッションに割り込む例を示しています。

var album = new Wrox.ASPAJAX.Samples.Album();
album.set_title("Sam's Town");
album.set_artist("The Killers");

//Force the debugger to appear
Sys.Debug.fail("Debug song additions");

album.addSong(new Wrox.ASPAJAX.Samples.Song(3,"When you were young"));
album.addSong(new Wrox.ASPAJAX.Samples.Song(7,"Uncle Johnny"));
$get("lblTitle").innerHTML = album.get_title();
$get("lblArtist").innerHTML = album.get_artist();

　JavaScriptのコード行の実行時にSys.Debug.failを呼び出してデバッグセッションをトリガするというのは便利な機能ですが、アプリケーションを実働環境に移す前にこれらの呼び出しを削除するのを忘れてはなりません。そうしないと、Internet Explorerでデバッグが有効になっている場合には常にデバッガがトリガされてしまいます。スクリプトのバージョンを2種類用意し（Microsoftではデバッグスクリプトとリリーススクリプトでこれを行っています）、ScriptManagerで適切なScriptModeを設定して、実行時にロードするスクリプトを決定するとよいでしょう（『Professional ASP.NET 2.0 AJAX』（Wrox, 2007, ISBN: 978-0-470-10962-5）の第9章「Testing and Debugging ASP.NET AJAX Applications」を参照）。こうするとコードを重複して持つことになりますが、リリーススクリプトでは空白文字をすべて除去してサイズを最小化し、デバッグスクリプトではデバッグ、トレース、アサーションなどの操作のために必要なSys.Debugクラスの呼び出しを含んだ読みやすいスクリプトを維持する、といった使い分けができます。

　ページ内にスクリプトが埋め込まれている場合にデバッガをトリガするもう1つのオプションは、ページ内のJavaScriptコード全体を（.aspxページに直接含めるのではなく）専用のスクリプトファイルに移すというものです。この場合は、.jsという拡張子を持つスクリプトファイルをページから参照します（スクリプトファイルはHTMLマークアップと一緒にブラウザに送られるのではなく、実行時に別にロードされます）。こうしておけば、その外部スクリプトファイルにブレークポイントを設定することができます。たとえば図4の「Listing9-12.js」ファイルのJavaScriptコードでは、ブレークポイントが設定されています（このファイルは『Professional ASP.NET AJAX』（Wrox, 2007, ISBN: 978-0-470-10962-5）のダウンロードページから入手できます）。

図4

　F11キー（ステップイン）またはF10キー（ステップオーバー）を押してコードを1ステップずつ実行していくと、ASP.NET AJAXで必要な動的ロードスクリプトファイルの場所を選択するように求められることもあれば、「There is no source code available for the current location」というエラーに遭遇することもあります。これが起こるのは、「ScriptResource.axd」および「WebResource.axd」HTTPハンドラを使ってロードされた動的生成スクリプトコードにステップインしようとしたときです。この場合、Visual Studioがトレースできる分離された物理ファイルはありません。この問題は、初めはイライラするかもしれませんが、すでにVisual Studio .NETの一部になっている単純なツールで軽減することができます。

　（Visual Studio .NET 2005 SP1はこの問題の解決に役立ちますが、やはりエラーの対処法を知ることが大切です。）

Visual Studio .NET 2005でのデバッグ手順

　Visual Studio .NET 2005には、スクリプトエクスプローラという非常に便利なツールが組み込まれていて、ページ内のスクリプト間での移動に使用できます。スクリプトエクスプローラを使用すると、エディタにスクリプトを動的にロードできるので、デバッガを使って簡単にステップインでき、「There is no source code available for the current location」エラーを避けることができます。スクリプトファイルをロードするか確認を求められたら、そのままキャンセルしてください（あるいは上述のエラーを受け取ったら［OK］をクリックします）。スクリプトエクスプローラウィンドウを表示するには、［デバッグ］→［ウィンドウ］→［スクリプト・エクスプローラ］を選択します（またはCtrl+Alt+Nキーを押します）。現在デバッグ対象になっているページをダブルクリックして、そのページをエディタで開き、表示されている他のスクリプトファイルをすべてダブルクリックします。このようにすると、そのページで参照しているすべてのファイルがVisual Studio .NETで開かれ、デバッガが適切なソースコードにアクセスできるようになり、さまざまな機能を利用したデバッグが可能になります。

　図5は、「Listing9-12.aspx」というASP.NET AJAX対応のページで使用されているスクリプトファイルとスクリプトエクスプローラの例です（このファイルは『Professional ASP.NET AJAX』（Wrox, 2007, ISBN: 978-0-470-10962-5）のダウンロードページから入手できます）。

図5

　デバッグセッションでコードを1ステップずつ実行していくときにJavaScript変数にマウスポインタを合わせても、VB.NETやC#のコードをデバッグしているときと違って、情報やデータが表示されないことに気づくでしょう。多くの場合、［自動変数］、［ローカル］、［ウォッチ］、［イミディエイト］といったウィンドウを使用すれば変数データにアクセスできますが、変数をカーソルで強調表示してから、強調されたテキストの辺りにカーソルを持っていくことで、その変数に含まれているデータを表示できることもあります。この方法はどんな状況でも使用できるわけではありませんが、覚えておくと役に立つでしょう。

　ASP.NETページ内のVB.NETまたはC#のコードをデバッグするときと同じように、Visual Studio .NET 2005内でデバッグセッションを直接開始することもできます。まず、ソリューションエクスプローラでデバッグしたいページを右クリックし、メニューから［スタートページに設定］を選択します。それから、F5キーを押すか、デバッグツールバーの緑の実行ボタン（緑の矢印が付いているボタン）をクリックすると、Internet Explorerが起動して、そのページが表示されます。分離されたスクリプトファイルにブレークポイントを設定したら、ブラウザでデバッグしたいアクションを実行することによって、ブレークポイントをトリガします。

　コードを1ステップずつ実行していくときは、［自動変数］、［ローカル］、［ウォッチ］、［イミディエイト］といった標準のデバッグウィンドウに完全にアクセスできます（図6を参照）。これらのウィンドウを使用すると、変数データにすばやくアクセスして、アプリケーションの内部で何が起きているかを詳しく調べることができます。

図6

　このセクションではVisual Studio .NET 2005のデバッグ機能に焦点を当てましたが、Visual Web Developer 2005 Expressにも、ASP.NET AJAXアプリケーションのデバッグに使用できる統合デバッグ機能があります。Visual Studio .NET 2005のデバッガほど充実した機能はありませんが、スクリプトエクスプローラ、ローカル、ウォッチといったウィンドウのサポートも備えています。

Internet ExplorerとMicrosoft Script Debuggerによるデバッグ

　ASP.NET AJAXページと関連スクリプトをデバッグしたいが、Visual Studio .NET 2005は使用できないという場合は、Microsoft Script Debuggerでスクリプトを表示し、1行ずつ実行しながらデバッグを行うことができます。Script Debuggeは、Windows NT 4、Windows 2000、Windows Server 2003、Windows XP、Windows VistaといったMicrosoftオペレーティングシステムで実行できるスタンドアロン製品として長らく利用されてきました。Script Debuggeはこちらからダウンロードできます（このURLは変更される可能性があります）。

　Script Debuggerをインストールしておくと、Internet Explorerのメニューから［表示］→［スクリプトデバッガ］→［開く］（または［次のステートメントで中断］）を選択したときに自動的にトリガされます。Script DebuggerはVisual Studio .NET 2005に組み込まれているデバッガほど強力ではありませんが、非常に便利であり、ASP.NET AJAXアプリケーションの問題を突き止めるのに役立ちます。

図7

　ページ内で使われているスクリプトを［実行中のドキュメント］ウィンドウですべて確認することができます。また、ブレークポイントの設定／削除もできます。それには、ブレークポイントを設定（または削除）したい行にカーソルを置き、ツールバーから該当するアイコンを選択します。手のアイコンではブレークポイントが設定され、赤い「X」付きの手のアイコンではブレークポイントが削除されます。スクリプトは「ScriptResource.axd」と「WebResource.axd」を通じてページに動的にロードされ、特別なことをしなくても直接アクセスしてステップインすることができます。

　Script Debuggerが起動したら、F8キーを押してコードを1ステップずつ実行したり、Shift+F8キーを押してコードをステップオーバーしたり、Ctrl+Shift+F8キーを押してコードからステップアウトしたりすることができます。あるいは、ツールバーから該当するアイコンを選択して、コードを1ステップずつ実行することもできます。コードを1ステップずつ実行しながら、コマンドウィンドウを使って変数とその値を見ることができます。呼び出したい変数名またはオブジェクト関数を入力すると、それが表示されます。

　図8はScript Debuggerで使用できるウィンドウの例です。

図8

　Visual Studio .NET 2005とMicrosoft Script Debuggerを同じマシン上で実行することはできますが、Script Debuggerをアンインストールすると、Internet ExplorerにScript Debuggerのメニュー項目が表示されなくなったり、Visual Studio .NETでSys.Debug.failの呼び出しが処理されなくなることがあります。Visual Studio .NETのインストールに対して修復を行えば、この問題を解消できます。