開発者ツールを使用したスクリプトのデバッグ

  • [アーティクル]

Windows Internet Explorer 8 の新機能

Internet Explorer 8 の開発者ツール機能では、組み込み型で軽量の Microsoft JScript デバッガーが提供されます。このデバッガーを使用すると、開発者はクライアント側の JScript コードにブレークポイントを設定でき、ブラウザーから離れることなく JScript コードをステップ実行できます。 このドキュメントでは、JScript デバッガーの高度な機能の概要を説明します。 Internet Explorer 8 開発者ツールのその他の機能については、「Internet Explorer 開発者ツールを理解する」 (英語の可能性あり) を参照してください。開発者ツールのインターフェイス コマンドの詳細については、「開発者ツールのユーザー インターフェイス リファレンス」 (英語の可能性あり) を参照してください。

  • 概要
  • デバッグを開始する
  • ブレークポイントを設定する
  • 実行を制御する
  • 変数を検査する
  • コール スタックを検査する
  • コンソールを使用してコード ステートメントを実行する
  • コンソールを使用してアラートとエラー メッセージをログ記録する
  • 注釈
  • 関連トピック

概要

JScript のデバッグは Web 開発の重要な部分です。 開発者ツール機能が提供する直感的で軽量な JScript デバッガーを使用すると、JScript のあらゆるデバッグ処理がワンクリックで簡単に操作できます。 Internet Explorer 8 のインストールが完了したら、開発者は、Internet Explorer に読み込まれたあらゆるサイトで JScript をデバッグできます。

Internet Explorer 8 内で開発者ツールを開くには、F12 キーを押すか、[ツール] コマンド バーで [開発者ツール] ボタンをクリックします。

注 : JScript デバッガーは、IActiveScriptSite インターフェイス (Microsoft Visual Basic Scripting Edition (VBScript) など) を実装するあらゆるエンジンのデバッグに使用できますが、サポートされるのは JScript のデバッグのみです。

デバッグを開始する

[スクリプト] モード タブのユーザー インターフェイスを表示する

図 1. [スクリプト] タブのユーザー インターフェイス

開発者ツールの [スクリプト] タブで、[デバッグ開始] ボタンをクリックするか F5 キーを押して、デバッグ処理を開始します。 このボタンをクリックすると、次のイベントが起動します。

  • [デバッグするには、Web ページの更新が必要です] ダイアログ ボックスが表示され、ページ更新のオプションが提供されます。 [OK] をクリックすると、デバッグが開始されてページが更新されます。[キャンセル] をクリックすると、デバッグは開始されず、ページも更新されません。
  • デバッグを開始するときに、開発者ツール ウィンドウが Internet Explorer 8 インスタンスに固定されていると、固定は自動で解除されます。 デバッグを停止すると、開発者ツール ウィンドウを Internet Explorer 8 インスタンスに再度固定できます。

デバッグを停止するには、[デバッグの停止] ボタンをクリックするか、Shift キーを押しながら F5 キーを押します。

注 : [デバッグするには、Web ページの更新が必要です] ダイアログ ボックスは、Internet Explorer のスクリプト デバッグを無効にしている場合にのみ表示されます。 ダイアログ ボックスで [OK] をクリックすると、ウィンドウを閉じるまで、Internet Explorer のこのインスタンスに対してスクリプト デバッグが一時的に有効になります。 Internet Explorer のすべてのインスタンスに対してスクリプト デバッグを有効にするには、[インターネット オプション] メニューの [詳細設定] タブをクリックします。 次に、[ブラウズ] カテゴリの [スクリプトのデバッグを使用しない (Internet Explorer)] オプションをオフにし、[OK] をクリックします。 変更を有効にするには、Internet Explorer のすべてのインスタンスを閉じ、それらを再度開きます。

注 : デバッグを開始したかどうかに関係なく、ページ上のすべてのスクリプト、個々のファイル、およびインライン スクリプト ブロックをドロップダウン スクリプト リスト ボックスで選択できます。 これらのファイルは、[スクリプト] モード タブを表示している間はいつでも切り替えることができます。 現在選択されているファイルのソースは、[Primary Content] ウィンドウに表示されます。

ブレークポイントを設定する

スクリプト コードが表示されている [Primary Content] ウィンドウから、次の方法でブレークポイントを設定できます。

  • ブレークポイントを挿入または削除する行番号をクリックします
  • コード行を右クリックして [ブレークポイントの挿入] をクリックします
  • カーソルをコード行の上に置き、F9 キーを押して、ブレークポイントを挿入または削除します

ブレークポイントは、デバッガーを開始しているかどうかに関係なく設定できます。 ブレークポイントを設定すると、ブレークポイント アイコン ブレークポイント アイコン がコードの行番号の横に表示され、その行のコードが強調表示されます。

ブレークポイントを設定すると、ブレークポイント行の直前でスクリプトの実行が一時停止し、実行される次の行がデバッガーによって強調表示されます。 デバッグ中にランタイム エラーが発生すると、デバッガーはエラー箇所で中断します。 エラー時に中断しないようにするには、[エラー時にブレーク] トグル ボタンの設定を解除するか、Ctrl + Shift + E キーを押します。 デバッガーによって実行が一時停止されている間、ブラウザーはユーザー入力に一切応答しません。

ブレークポイントの設定と管理を表示する

図 2. ブレークポイントの設定と管理

デバッガーの [ブレークポイント] タブに、使用可能なすべてのブレークポイントの一覧が表示されます。 この一覧で、すべてのブレークポイントの位置、および各ブレークポイントが設定されたファイル名と行番号を確認できます。 ソース コードのブレークポイントの位置に移動するには、一覧内のブレークポイントをダブルクリックします。 ブレークポイントを削除せずにブレークポイントを非アクティブ化するには、ブレークポイントの横にあるチェック ボックスをオフにします。 ブレークポイントを削除するには、ブレークポイントを右クリックしてショートカット メニューの [削除] をクリックします。 現在のサイトから移動しても、開発者ツールを閉じるまで、Internet Explorer はブレークポイント情報を保持します。

注 : ブレークポイントが無効になる可能性のあるシナリオがいくつかあります。 無効なブレークポイントは機能しなくなり、ブレークポイント アイコンの上に警告アイコンが表示されます。 ブレークポイントを設定したサイトから移動すると、そのブレークポイントは無効になります。 デバッグ モードでない誤った場所にブレークポイントを設定した場合や、デバッグを開始して、一致するコードがデバッガーによって見つけられなかった場合は、ブレークポイントが無効になる場合があります。 また、ブレークポイントを設定した後にソース コードを変更してページを更新すると、ブレークポイントが無効になる場合があります。

ブレークポイントを設定すると、そのブレークポイントに達したときに実行はそのブレークポイントの位置で必ず一時停止します。 特定の条件を満たす場合にのみ実行をブレークポイントで一時停止するには、そのブレークポイントに対して条件を設定します。 ブレークポイント条件を設定するには、次の手順を実行します。

  1. [Primary Content] ウィンドウまたは [ブレークポイント] ウィンドウのブレークポイントを右クリックします。 ショートカット メニューが表示されます。
  2. [条件...] オプションを選択します。 ダイアログ ボックスが表示されます。
  3. [条件付きブレークポイント] ダイアログ ボックスで条件を入力し、[OK] をクリックします。

これにより、条件が満たされた場合にのみ、デバッガーはこのブレークポイントで実行を一時停止します。

実行を制御する

ブレークポイントを使用してスクリプトの実行を一時停止すると、その位置でのコードの状態を検査できます。 実行がブレークポイントで一時停止した場合、次のコマンド ボタンのいずれかを使用して実行を制御できます。

デバッガーの実行制御ボタンを表示する。

  • 続行

    別のブレークポイントに到達するか、スクリプト エラーが発生するまで、一時停止せずにスクリプトの実行を続けます。 キーボード ショートカット: F5 キー。

  • すべてブレーク

    次のスクリプト ステートメントを実行する直前で実行を一時停止します。 このボタンをクリックするか、Ctrl + Shift + B キーを押してこのコマンドをアクティブ化してから、必要なデバッグ処理を実行します。

  • エラー時にブレーク

    エラーが発生した位置で実行を一時停止します。 このコマンドは既定でアクティブになっています。 このエラー位置で実行を一時停止しない場合、このボタンをクリックしてこのコマンドを非アクティブ化します。ただし、いずれの場合もエラーが発生するたびにエラー メッセージがコンソールに表示されます。 コマンドのオン/オフを切り替えるキーボード ショートカット: Ctrl + Shift + E キー。

  • ステップ イン

    スクリプトの次の行を実行して一時停止します。次の行が新しいメソッドの内部にあっても関係ありません。 キーボード ショートカット: F11 キー。

  • ステップ オーバー

    現在のメソッド内のスクリプトの次の行に進んでから、一時停止します。 メソッド呼び出しをステップ オーバーする場合に役立ちます。 キーボード ショートカット: F10 キー。

  • ステップ アウト

    現在のメソッドを呼び出したメソッド内の次の行までスクリプトの実行を続けます。 ループおよびメソッド呼び出しからステップ アウトする場合に役立ちます。 キーボード ショートカット: Shift + F11 キー。

変数を検査する

[ローカル] ウィンドウと [ウォッチ] ウィンドウを使用してあらゆる変数を検査できます。 変数を検査するには、次の処理を行います。

  • [デバッグ開始] をクリックして、デバッガーを開始します
  • 実行パスに沿ってブレークポイント (複数可) を設定します
  • スクリプトを実行します

実行中に到達した最初のブレークポイントの位置でデバッガーは一時停止します。 実行が一時停止したら、[ローカル] ウィンドウおよび [ウォッチ] ウィンドウ内の変数を検査および編集できます。

デバッガーの [ローカル] ウィンドウには、現在の実行スコープで使用可能なすべての変数の名前、値、型が表示されます。 スコープ外にある変数は使用できず、[ローカル] ウィンドウに表示されません。 このような「スコープ外」の変数とオブジェクトについては、[ウォッチ] ウィンドウを使用していつでも確認できます。

変数を [ウォッチ] ウィンドウに追加すると、その変数を別のスコープからウォッチできます。 [ウォッチ] ウィンドウに変数を追加する方法はいくつかあります。

  1. [Primary Content] ウィンドウでスクリプト テキストを選択し、右クリックしてコンテキスト メニューをアクティブにして [ウォッチ式の追加] をクリックします。 これにより、選択したテキストがウォッチ リストに追加されます。
  2. [ローカル] ウィンドウで変数またはオブジェクトを右クリックして [ウォッチ式の追加] をクリックすると、その変数またはオブジェクトがウォッチ リストに追加されます。
  3. [ウォッチ] ウィンドウで [クリックして追加] をクリックし、ウォッチする変数の名前を入力します。 [クリックして追加] というテキストはウォッチ リストの最下部に表示されます。これは、[ウォッチ] ウィンドウのリスト内の最後のアイテムです。

検査する変数を [ローカル] ウィンドウに表示する。

図 3. [ローカル] ウィンドウで変数を検査する。

1 行のコードを実行するたびに、デバッガーは [ローカル] ウィンドウと [ウォッチ] ウィンドウ内の変数の値を更新します。 更新された値は赤のテキストで表示されます。 [ローカル] ウィンドウまたは [ウォッチ] ウィンドウ内の変数の値を変更するには、値をダブルクリックし、新しい値を入力して、Enter キーを押します。 また、オブジェクトを右クリックして [値の編集] をクリックし、編集を開始することもできます。 編集が完了したら、Enter キーを押して編集をコミットするか、Esc キーを押して編集をキャンセルします。

コール スタックを検査する

デバッガーがブレークポイントで実行を一時停止すると、[Callstack] ウィンドウに実行コンテキストの一覧が表示されます。 スタック項目に移動するには、項目をダブルクリックします。 デバッガーはそのメソッドを [Primary Content] ウィンドウに表示します。 その [ローカル] ウィンドウと [ウォッチ] ウィンドウで、実行コンテキストの変数を検査できます。

コンソールを使用してコード ステートメントを実行する

デバッガーの [コンソール] ウィンドウでは、スクリプト ステートメントをその場で直接実行するためのコンソールが提供されます。 有効なステートメントまたは変数を入力して、Enter キーを押すか [スクリプトの実行] をクリックします。入力したステートメントが、現在のページのコンテキストで、実行が停止された場所で実行されます。

変数の値を設定するには、次の標準的な代入構文を使用します。

s = 'my query string';

[複数行モード] ボタンをクリックすると、入力ウィンドウが拡張され、複数行の入力が可能になります。 また、これにより、Enter キーの動作も変わります。Enter キーを押すと、スクリプトが実行されずに新しい行が作成されます。 ここでは、複数行のコードを入力し、[スクリプトの実行] をクリックして、入力したコードを実行できます。 サイズ変更可能な入力ウィンドウでは、ショートカット メニューを通じて追加の制御が用意されています。

デバッガーを開始していなくても、[コンソール] ウィンドウはいつでも使用できます。 実行がブレークポイントで停止すると、このウィンドウに入力したコマンドがブレークポイントの実行スコープで実行されます。実行が一時停止されない場合、コマンドはグローバル スコープで実行されます。

コンソールを使用してアラートとエラー メッセージをログ記録する

開発者ツールを開くと、Internet Explorer の特定のインスタンス内のすべてのスクリプト エラーが [コンソール] ウィンドウにログ記録されます。 エラーの場所に移動するには、エラーに示されているソース情報をクリックします。

console.log API を使用して、メッセージをコンソールにログ記録することもできます。 window.alert() を使用して無数のダイアログを生成するのではなく、console.log を呼び出して文字列を [コンソール] ウィンドウに出力します。 メッセージを区別するには、次の各 console.log API を使用します。

  • console.log
  • console.info
  • console.warn
  • console.error
  • console.assert

これらのコンソール コマンドは、引数リストを付けて呼び出すことができます。この引数を結合すると出力文字列を生成できます。 引数は、代入パターンを使用して printf 形式で書式設定することもできます。 たとえば、次のように console.log を呼び出すことができます。

  • console.log("Variable x = " + x + " and variable y = " + y)
  • console.log("Variable x = ", x, " and variable y = ", y)
  • console.log("Variable x = %d and variable y = %d", x, y)

ただし、console.assert コマンドについては、true または false を評価する式を最初の引数に指定する必要があります。 式によって true と評価された場合、アサーション メッセージはコンソールに出力されません。それ以外の場合、アサーションメッセージがコンソールに出力されます。 次に例を示します。 



var x = 1;
var y = 1;


//This expression evaluates to TRUE, so the message will not show up in the console
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);


//This expression will evaluates to FALSE so the message will show up in the console
y = 2;
console.assert(x==y, "ASSERT: x == " + x + "; y == " + y);

このコンソール メッセージは、[コンソール] ウィンドウからフィルター処理して表示または非表示にできます。 [コンソール] ウィンドウから表示または非表示にするメッセージを選択するには、[コンソール] ウィンドウを右クリックしてカーソルをフィルターの上へ移動して、フィルターを設定します。 使用可能なフィルターの一覧が表示されます。ここでは、チェック マークの付いているフィルターがアクティブです。

コンソール オブジェクトを拡張して、開発ニーズに応じて新しい機能を追加することもできます。 たとえば、独自のデバッグ メッセージをコンソールに出力するようにメソッドをカスタマイズできます。 console.debug コマンドを追加するには、次のコード スニペットを JScript コードに追加します。

console.debug = function(name, value){
	console.warn("DEBUG: " + name + "==" + value);
}

この例は、2 つの引数を取り込み、単にそれらを最小限の書式で [コンソール] ウィンドウに出力します。 console.debug を定義できるようになれば、関数の引数と動作をニーズに合わせて自由にカスタマイズできます。 このように、コンソール オブジェクトを使用して、任意の数の必要な新しいコマンドを追加できます。

注 : 既存のコンソール コマンドを新しいコマンド内で使用するため、フィルターは依然として適用されます。 たとえば、前の例の console.debug コマンドでは、console.warn を使用してメッセージが [コンソール] ウィンドウに出力されます。 フィルター リストの [コンソール警告] チェックボックスをオフにすると、console.warn からの出力は [コンソール] ウィンドウに出力されなくなります。

注釈

  • console.log メッセージをクリアするには、console.clear() をコード内に含めるか、コンソールのコマンド ラインから実行します。 console.clear() を実行しても、スクリプト エラー メッセージまたはコンソールのコマンド ラインに入力したコードはクリアされません。
  • [コンソール] ウィンドウを完全にクリアするには、[コンソール] ウィンドウ内を右クリックして、[コンソールのクリア] をクリックします。 これにより、[コンソール] ウィンドウ内のすべてのメッセージがクリアされます。

関連トピック