数週間前、新しいVS 2008におけるJavaScript インテリセンスのサポートについて投稿しました。

VS2008で人気となる他のJavaScript機能の１つは、JavaScriptのデバッグのサポートをかなり改善したことです。これは無料のVisual Web Developer 2008 ExpressエディションでもVisual Studioでも有効で、JavaScriptの使用やAJAXアプリケーションのビルドを相当簡単にします。

ASP.NETページでJavaScriptののブレークポイントを設定

VS2005で嫌なことの1つはまずASP.NETページを起動させてからでないと、デバッガの中でページ上にJavaScriptのブレークポイントを設定できないことです。

VS2008では新しいサポートが追加され、サーバサイドの.aspxや.masterソースファイルに直接JavaScriptのブレークポイントを設定できるように改善されています。

上記のような.aspxページでブレークポイントを設定するとき、VS2008は自動的にブレークポイントの場所をページが後で実行された時にブラウザで起動する動的に生成されたクライアントHTMLにマッピングします。

もし起動中のHTMLドキュメントでブレークポイントの場所を追加、削除、更新した場合、VS2008は今では逆（リバース）マッピングし、サーバ上の元の.aspxや.masterソースファイルでブレークポイントを更新したりできるほど賢くなっています。これにより、編集・デバッグ、編集・デバッグのいいフローをアプリケーションで回すことが非常に簡単になります。

最善なところは、クライアントサイドのJavaScriptのブレークポイントとVB/C#のサーバサイドのブレークポイントを同時（しかも同じページ上で）に設定することができ、サーバサイドとクライアントサイドの両方を通すために1回のデバッグセッション（これはAJAXの重いアプリケーションには非常に有効的です。）で1つのデバッガを使用することができます。

またデフォルトで設定したJavaScriptのブレークポイントは、プロジェクト・ソリューションを閉じた時に全て保存されます。プロジェクトを再度開いた時、ブレークポイントを設定した前回の場所はそのまま有効になっています。

ソリューションエクスプローラ内のスクリプトドキュメントナビゲーション

ブラウザのクライアントに送られたJavaScriptは通常動的にサーバ上で（例えば、コンパイルされたサーバコントロール、ASP.NET AJAXのUpdatePanelsやコントロールエクステンダなど、でリソースとして保存されたスクリプトと一緒に）生成されたものです。このようなシナリオでは、ページからロードされたJavaScriptのURLを全て簡単に見ることができ、且つデバッガでそこへステップインできるようにしたいと思われると思います。

VS2008のソリューションエクスプローラのビューに起動中のスクリプトドキュメント機能（VS2005では別のツールペインウィンドウにありました。）を統合することで、VS2008ではこれをWebアプリケーションをデバッグしている時に簡単にできるようになっています。

特にVSを使ってページをデバッグしている時、VS2008はVSソリューションエクスプローラペインの上でブラウザがロードした現在デバッグ中のページのスクリプトURLを全てリスト化します。

上にある"スクリプトドキュメント"ノードの配下のURLをダブルクリックすると、ページにロードされたJavaScriptファイルを見ることができます。

明らかですが、ロードされたJavaScriptにブレークポイントを設定し全てをデバッグすることができます。

よりリッチなデバッグウォッチ・ローカルとビジュアルサポート

デバッガでJavaScriptファイルを簡単に開いて操作できるといいですが、VS2008のJavaScriptデバッグ機能で行われた改善点の本来の肉質部分は非常に改善されたオブジェクト実行と検査サポートにあります。VS2008を使ってデバッガ内で変数を検査すると、非常に詳細なオブジェクトの情報が利用できるようになっていることが分かります。

ランタイムのオブジェクトメソッドを参照することができるようになっています。

ランタイムオブジェクトイベントを参照することができるようになっています。

そして起動中のオブジェクトの非常に詳細なプロパティとプロパティのタイプ情報を取得できるようになっています。以下を見て頂くと、要素の親HTML要素およびHTML DOM内での全体的なポジションについて詳細を動的に検索するために、どのようにdiv要素の"parentElement"プロパティを探索しているか確認して頂けると思います。

お分かりの通り、検索また値を設定する時もデバッガプロパティグリッドを使うことができます。ランタイムでJavaScriptを取得し変更するためにイミディエイトウィンドウでコードを起動させることもできます。

またVS2008はJavaScriptのデバッグとも使えるプラグインのデバッグビジュアライザのサポートも行っています。これにより開発者はデバッガを拡張することができるため、それらが起動中のオブジェクトに対して動作させたり、オブジェクトのリッチなビジュアライゼーションビューを提供させることができます。例えば、ビルドインの"テキスト"、"XML"、"HTML"のビュジュアライザを使って、値をより上手く調べるためのダイアログをロードすることができます。

もしかしたらJSONやRESTのJavaScriptビジュアライザを提供してくれるかっこいいコードプレックスのプロジェクトを近々見ることができるかもしれないと思っています。

まとめ

上記のチュートリアルが間もなく公開される新しいJavaScriptのデバッグ機能を上手くご紹介できていれば幸いです。VS2008と.NET3.5で搭載されるJavaScriptやAJAX機能はまだたくさんあり、今後のブログ投稿でカバーしていきたいと思います。

新しいVS 2008 マルチターゲットサポートのおかげで、.NET3.5（ASP.NET AJAXを今では搭載した）でビルドしたASP.NETアプリケーション、そして既存のASP.NET2.0アプリケーション（別でダウンロードしたASP.NET AJAX1.0を使用したものも含む）の両方で上記のJavaScriptのデバッグ機能を使うことができます。これが新しいVS 2008 JavaScript インテリセンスサポートと組み合わせることで、たとえ.NET2.0アプリケーションだけをターゲットとして使っている人でさえも、VS2008をとても使い始めずにはいられない理由となるでしょう。

Hope this helps,

Scott

P.S.　VS2005のJavaScriptのデバッグについての詳細は、このブログの投稿を読んでください。Dan Wahlinも最近AJAXのテストとデバッグのツールセットを投稿しています。ぜひ、ここをチェックしてみてください。