IEでJavaScriptのデバッグ
書き途中の原稿を引っ張り出したところ、なぜか原稿が巻き戻っていて少しへこんでいたyukiinu2ndです。
へこんでばかりいられないので、新ネタで書きます。
JavaScriptのデバッグというと、FirefoxのFireBugが真っ先に挙がると思います。
FireBugはそれくらい便利です。これがないと自分は仕事の効率が相当下がってしまいます。
ところが、IEはそういったデバッグツールがあまりありません。ただ、0ではないのでそのツールを紹介したいと思います。
IE Developer Toolbar
DOMインスペクタ＋α程度の機能を持っています。Microsoft公式ツールです。
ドメインCookie削除ができたりCookieの確認ができるのでそこは意外と便利。
スタイルをその場で変更することもできるようです。*1
ただ、JavaScriptのデバッグという点ではあまり有用ではないかも。
インストール方法は
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
からインストーラーをダウンロードし、インストールしたらIEを再起動すれば使えるようになります。
起動するには＜＞の中にマウスカーソルな矢印があるアイコンをクリックすると画面下部に開かれます。
IE7の場合はメニューのツールの右にあるシェブロン(>>)をクリックするとあるはずです。
スクリプトデバッガ
OfficeについているVisual StudioのようなUIを持つデバッガです。
FireBugに比べると起動や動作が重い気がするのと、Visual Studioに慣れていない人はUIが気になるかもしれません。
しかし、JavaScriptのステップ実行や変数の確認等、JavaScriptのデバッグをするには十分な機能を持っています。
というか、これがないとIEでJavaScriptをデバッグするのに苦労します……。
インストールは
コントロールパネル→プログラムの追加と削除→Office〜のところで「変更」ボタンを押す
↓
「機能の追加/削除」選んで次へ
↓
「アプリケーションごとにオプションを指定してインストール」にチェックを付けて次へ
↓
「Office ツール」の中の「HTML ソース編集」で「マイコンピュータからすべて実行」を選択して「更新」
↓
インストールが完了したら「インターネットオプション」を開く
↓
詳細設定タブの「スクリプトのデバッグを使用しない」を両方外す。
↓
利用したいページに来たらメニューバーの
表示→スクリプトデバッガ→開く
↓
デバッガの選択では「新しいインスタンス Microsoft Script Editor」を選んで「はい」
↓
次にウィンドウが開くが気にせず「OK」ボタンを押す
これで利用可能です。
Visual Studioに慣れた人は大体わかるかもしれないですが、そうでない方には少しきついかもしれません。
というのも、デフォルトでは変数確認できるウィンドウが出ていないと思います。
メニューバーのデバッグ→ウィンドウ→ローカルを出しておけばローカルスコープの変数が表示されます。
イミディエイトウィンドウがFireBugでいうコンソールのようなものですが、まだ今ひとつ使い方がわからずにいます……。
色々個別にコマンドを実行できたりするようですが……。
イミディエイトウィンドウはメニューバーからデバッグ→ウィンドウ→イミディエイトで開くことができます。
スクリプトデバッガはもう少し活用できるようにならないといけないなぁと思いつつ、IEのJavaScriptデバッグツールの紹介でした。
