はじめに
IE10には、「開発者ツール」という便利なツールが標準搭載されていて、これを使うと特別なソフトウェアのインストールなしに、ブラウザ上でJavaScriptのデバッグができるようになります。
この記事では、「開発者ツール」の使い方を少しご紹介したいと思います。
プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)
posted with amazlet at 13.03.11
河村 嘉之 川尻 剛
技術評論社
売り上げランキング: 2,031
技術評論社
売り上げランキング: 2,031
開発者ツールを使ってJavaScritptをデバッグする
１．IE10でJavaScriptをデバッグしたいページを表示します。
２．F12キーを押して、開発者ツールを起動します。あるいは、メニューバーのツール-開発者ツール(L)から起動します。
３．スクリプトタブを選択します。
４．スクリプトの実行をストップさせたい箇所の行番号をクリックするか、F9キーを押して、ブレークポイントを設定します。
５．デバッグ開始ボタンをクリックします。
６．表示しているページをリロードすると、デバッグが開始され、目的のスクリプトに到達するとスクリプトがストップします。
７．デバッグの停止ボタンをクリックすれば、デバッグは終了できます。
外部スクリプトのデバッグ
開発者ツールは、外部jsファイルのデバッグもできます。現在表示中のページが読み込んでいるjsファイルの一覧は、「ソースの表示」選択ボックスで見ることができます。この選択ボックスからデバッグしたいファイルを選択すると、画面にそのjsファイルのソースコードが表示されます。
変数のウォッチ
実行中のローカル変数の値を確認するには、画面右側にあるローカルというタブを選択すると、確認することができます。
また、ローカル変数以外の変数の値を確認する場合は右クリックで、「ウォッチ式の追加」からウォッチウインドウに変数を追加して確認することができます。
主なキーボードショートカット
デバッグ中はキーボードショートカットで以下のような操作ができます。
- F10：ステップオーバ-
- F11：ステップイン
- Shift+F11：ステップアウト
- F5：スクリプトの続行
- Ctrl+Shift+B：すべてブレーク
