ASP.NETがAjaxベースで動作して、ページ遷移せずにイベントをサーバ側で処理できる素敵な未来の話は歓迎するとして、未だその未来に達していない目の前の現状についての話です。
ごくストレートにAjaxプログラムを開発する場合、それはクライアント側のJavaScriptコードとサーバ側のコードが直接的に絡まないで別個に動くことを意味します。これが何を意味するのかというと、たとえサーバ側技術にASP.NETを利用した場合であっても、クライアント側のデバッグの際には「ASP.NETに関わりを持たない単なるJavaScript埋め込みHTMLファイル」の中にブレークポイントを置いて実行する必要が出たりするわけです。
ところが、MSDNでVisualStudio 2005のJScriptのデバッグのあたりを調べても、コマンドラインプログラムのケースと、ASP.NETのケースしか説明が見つかりませんでした。
しかし、ページ閲覧中にJavaScriptのエラーが出た場合はプロセスにアタッチしてトレース実行できるのだから、直接デバッグに入る方法があるはずだと思って試行錯誤して割り出しました。
ちなみに、よくある話題のように思いますが、軽く検索しても出てこなかったので、ここにメモっておきます。
クライアント側JavaScriptコードにブレークポイントを設定して止める手順 §
表題通りの結果を得るための(たぶん最短の)手順を、プロジェクト作成の段階から以下にまとめます。
- メニュー: ファイル→新規作成→Webサイト
- 空のWebサイトを選択、場所を適切に設定後、OKをクリック (言語は何でも構わないVisual BasicでもC#でも)
- メニュー: Webサイト→新しい項目の追加
- HTMLページを選択し、名前を適切に書き直して「追加」をクリック
- 下記のコード例のようにJavaScriptコードを書き足す
- 適当な行(alertの行等)にキャレットを置いてF9キーを押してブレークポイント追加
- F5キー(実行)を押す
- Web.configを追加してデバッグを有効にするか、という質問が出るので、「……有効にする」を選択した状態でOKをクリック
- IEが開き、プログラムが実行される
- 動作が中断され、VisualStudio 2005上でブレークポイントを設定した箇所で止まっていることが分かる
- この時点で変数の名前の上にマウスポインタを当てると、変数値を見ることができる
- F5キーを押して継続実行させる (プログラムが動作する)
- IEを閉じると、デバッグセッションも終了する
コード例 §
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>無題のページ</title>
<script language="javascript" type="text/javascript">
function testjs()
{
var a=1;
var b=2;
var c=a+b;
alert(c);
}
</script>
</head>
<body onload="testjs();">
</body>
</html>