小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


IE8の開発ツールを使ってJavaScritptをデバッグする方法

はじめに

IE8にはFirebugのような開発ツールが標準で搭載されていて、これを使うと特別なソフトウェアのインストールなしに、ブラウザ上でJavaScriptのデバッグができるようになります。今日はこの開発ツールの使い方を少しご紹介したいと思います。

IE8の開発ツールを使ってJavaScritptをデバッグする

1.はじめに、IE8でJavaScriptをデバッグしたいページを表示します。
2.F12キーを押して、開発ツールを起動します。あるいは、メニューバーのツール-開発ツールから起動します。
3.スクリプトタブを選択します。

4.スクリプトの実行をストップさせたい箇所の行番号をクリックするかF9キーを押して、ブレークポイントを設定します。

5.デバッグ開始ボタンをクリックします。
6.表示しているページをリロードすると、デバッグが開始され、目的のスクリプトに到達するとスクリプトがストップします。
7.デバッグの停止ボタンをクリックすれば、デバッグは終了できます。

外部スクリプトのデバッグ

IE8の開発ツールは、外部jsファイルのデバッグもできます。現在表示中のページが読み込んでいるjsファイルの一覧は、「デバッグ開始」ボタンの右隣にある選択ボックスで見ることができます。この選択ボックスからデバッグしたいファイルを選択すると、画面にそのjsファイルのソースコードが表示されます。

変数のウォッチ

実行中のローカル変数の値を確認するには、画面右側にあるローカルというタブを選択すると、確認することができます。

また、ローカル変数以外の変数の値を確認する場合は右クリックで、「ウォッチ式の追加」からウォッチウインドウに変数を追加して確認することができます。

主なキーボードショートカット

デバッグ中はキーボードショートカットで以下のような操作ができます。

  • F10:ステップオーバ-
  • F11:ステップイン
  • Shift+F11:ステップアウト
  • F5:スクリプトの続行
  • Ctrl+R:ブラウザキャッシュのクリア
  • Ctrl+Shift+E:エラー時にブレーク
  • Ctrl+Shift+B:すべてブレーク