Microsoft Script Editorを使ったIEで動作しているJavaScriptをデバックする方法

Webアプリの開発をしていて、FireFoxにFirebugを使ってデバックしているのだけど、どうしてもブラウザ実装の差異でIEでは動かない場面が出てきてしまう。これまでIEでデバックするときは古典的な方法でalertを使いせっせと変数の値を参照していたのだけど、どうしても面倒になってしまう。
IEではJavaScriptでエラーになったときに表示される警告ダイアログ内の行と文字を見ても、問題となった箇所へたどり着くのが困難な場合が多いので、Office2003に入っているMicrosoft Script Editorを使うとデバッガが立ち上がりエラーの箇所を示してくれる。でも、変数の値を参照できない(?)のでデバッガが立ち上がったからといって問題を解決できている状況でもない。
この状況で、IEでのデバックの効率を上げるために数日模索していた結果、Microsoft Script Editorを使いブレイクポイントを設定してデバックする方法が分かったので、その手順を記録しておく。

あっ。Visitual Stadioをいう案もあるのかもしれないけど、JavaScriptをデバックするためだけにあんな重たいものをインストールするのは無し。

  1. Microsoft Script Editorのインストール。英語だけどHOW-TO: Debug Javsscript in Internet Explorerを参考
  2. IEを起動して、デバックしたいページへ遷移
  3. Microsoft Script Editorはスタートメニューに登録されないので、「名前を指定して実行」からバイナリーを直接起動C:\Program Files\Microsoft Office\OFFICE11\MSE7.EXE
  4. 「デバック」→「プロセス」を選択して、プロセス一覧を表示
    Microsoft Script Editor デバック1
  5. プロセス一覧のタイトルにはウィンドウのタイトルが出ているので、これを頼りにIEのプロセスを特定して、「アッタチ(A)」ボタンを押す。
    Microsoft Script Editor デバック2
  6. 「プロセスにアッタチ」というウィンドウが表示されるので、そのまま「OK」。
    Microsoft Script Editor デバック3
  7. アッタチしたら、プロセス一覧のウィンドウは必要ないので閉じる。
  8. 「デバック」→「ウィンドウ」から「実行中のドキュメント」を選択して、「実行中のドキュメント」を表示する。
  9. 「実行中のドキュメント」からデバックしたいJavaScriptのソースファイルを選択(ダブルクリック)する。
    Microsoft Script Editor デバック5
  10. ソースコードが表示されるので目的の場所へブレークポイントを設定。

    Microsoft Script Editor デバック6
  11. アッタチされたIEから操作を行なうと、ブレークポイントで停止する。この後は、ウォッチとステップ実行でデバックを進める
  12. 終るときは、「デバッグ」→「すべてデタッチ」を選択して、IEのプロセスをMiscsoft Script Editorから解放。
    Microsoft Script Editor デバック7

Trackback URL

Leave a comment

Your comment