開発者ツール : スクリプト デバッグの概要

メモ : このドキュメントは暫定版であり、変更されることがあります。

Internet Explorer 8 の開発者ツール機能には、軽量で組み込み型の Microsoft JScript デバッガーがあります。開発者はこのデバッガーを使用してブレークポイントを設定し、ブラウザーを終了することなくクライアント側の JScript コードを実行することができます。このドキュメントでは、JScript デバッガーの高レベルな機能について説明します。Internet Explorer 8 開発者ツールのその他の機能については、「Internet Explorer 8 の開発者ツールの概要」を参照してください。また、開発者ツールのユーザー インターフェイス (UI) については、「Internet Explorer 8 開発者ツールの GUI リファレンス」を参照してください。

• はじめに
• デバッグの開始
• ブレークポイントの設定
• 実行の制御
• 変数の検査
• コール スタックの検査
• コンソールを使用したコード ステートメントの実行
• コンソールを使用した警告およびエラー メッセージのログ記録
• 関連トピック

はじめに

JScript デバッグは Web 開発の重要な要素です。JScript デバッガーは軽量かつ直観的でわかりやすく、プロの開発者でなくても容易に利用できる一方、プロの開発者向けのツール セットにも十分対応できる機能を備えています。このデバッガーを使用すると、ワンクリックで簡単にエンドツーエンドの JScript デバッグを行うことができます。Internet Explorer 8 をインストールすると、開発者はロードされているすべてのサイトの JScript を Internet Explorer でデバッグできます。

開発者ツールを開くには、F12 キーを押すか、[ツール] コマンド バーの ［開発者ツール］ ボタンをクリックします。

デバッグの開始

開発者ツールを [スクリプト] モードにし、[デバッグ開始] をクリックしてデバッグ プロセスを開始します。次に、[デバッグするには、Web ページの更新が必要です] ダイアログ ボックスに、ページの更新オプションが表示されます。[OK] をクリックすると、デバッグが開始し、ページが更新されます。[キャンセル] をクリックすると、デバッグは開始せずページも更新されません。デバッグの開始時に、開発者ツール ウィンドウが Internet Explorer 8 インスタンスに固定されている場合は、自動的に固定解除されます。デバッグが終了したら、再度 Internet Explorer 8 インスタンスに固定することができます｡

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

図 1: スクリプト ツールのユーザー インターフェイス

デバッグを停止するには、[デバッグの停止] をクリックするか、Shift + F5 キーを押します。

メモ: デバッグを開始したかどうかにかかわらず、[スクリプト リスト] ドロップダウン リストに、個別のファイルからインライン スクリプトのブロックに至るまで、ページのすべてのスクリプトを表示できます。スクリプト モード中は、これらのファイル間をいつでも切り替えることができます。現在選択されているファイルのソースが、プライマリ コンテンツ ペインに表示されます。

ブレークポイントの設定

ブレークポイントはソースの表示中にいつでも設定でき、スクリプト ソースと、スクリプトが定義された html ソース内のどこにでも設定できます。特定の行にブレークポイントを設定するには、行番号の隣をクリックします。ブレークポイントが設定されると、対応するコード行が強調表示されます。また、コンテキスト メニューを表示したり、F9 キーを押したりしても、ブレークポイントを設定できます。

ブレークポイントによってブレークポイント行の直前のスクリプト実行が一時停止されると、デバッガーによって次に実行すべき行が強調表示されます。デバッグ中にランタイム エラーが発生すると、エラーの場所でデバッガーが一時停止します。この動作を変更するには、[エラー時にブレーク] ボタンをクリックするか、Ctrl + Shift + E キーを押します。Internet Explorer が一時停止すると、エラーの原因となった行がプライマリ コンテンツ ペインで強調表示されます。スクリプト デバッガーからの入力を待機している間は、ブラウザーはユーザー入力に応答しません。

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

すべてのブレークポイントの一覧は、デバッガーの [ブレークポイント] タブに表示されます。このタブには、すべてのブレークポイントの場所のほか、ファイル名と、ブレークポイントが設定されている行番号も示されます。ブレークポイントのソース コードの場所に移動するには、一覧からブレークポイントをダブルクリックします。ソース コードからブレークポイントを削除せずに無効化するには、ブレークポイントの横にあるチェック ボックスをオフにします。ブレークポイントを削除するには、ブレークポイントを右クリックし、ショートカット メニューから [削除] を選択します。開発者ツールを閉じるまでは、現在のサイトから別のサイトに移動した場合でも、Internet Explorer でブレークポイントの情報が維持されます。

ブレークポイントが設定されている場合は、ブレークポイントが検出されるたびに実行が停止します。ある条件に一致する場合にのみブレークポイントで実行を停止させるには、そのブレークポイントの条件を設定します。これを行うには、まずブレークポイントを右クリックし、[条件] をクリックします。次に、[条件付きブレークポイント] ダイアログ ボックスに条件を入力し、[OK] をクリックします。これにより、設定した条件に一致する場合にのみ、そのブレークポイントでデバッグが停止するようになります。

実行の制御

ブレークポイントからは、次のコマンドのいずれかを使用して実行を制御できます。

• [続行]

  別のブレークポイントやスクリプト エラーが検出されるまで、中断せずにスクリプトを実行します (キーボード ショートカット : F5)。

• [すべてブレーク]

  次の実行対象スクリプト ステートメントの直前で実行を一時停止します (キーボード ショートカット : Ctrl + Shift + B)。

• [エラー時にブレーク]

  このボタンが押されている場合は、エラーが発生したポイントで実行を一時停止します。このボタンが押されていない場合は、エラーが発生しても実行が中断せず、例外の発行して続行されます (キーボード ショートカット、Ctrl + Shift + E でオン/オフを切り替え)。

• [ステップ イン]

  次の行が新しいメソッドに含まれている場合でも、スクリプトで次の行を実行し、一時停止します (キーボード ショートカット : F11)。

• [ステップ オーバー]

  現在のメソッドでスクリプトの次の行まで続行し、一時停止します。メソッド呼び出しのステッピングに便利です (キーボード ショートカット : F10)。

• [ステップ アウト]

  現在のメソッドを呼び出したメソッド内の次の行までスクリプトの実行を続けます (キーボード ショートカット : Shift+F11)。

変数の検査

ブレークポイントで実行が一時停止するたびに、スクリプトの変数を検査することができます。デバッガーの [ローカル] タブには、現在の実行スコープ内のすべての変数の名前、値、および型が表示されます。変数は、スコープ外の場合は使用できません。

[ウォッチ] タブに変数を追加すると、別のスコープから変数を検査できます。ウォッチ変数を設定するには、ソース テキストを選択して右クリックし、ショートカット メニューで [ウォッチの追加] をクリックします。これにより、カーソルが置かれた単語に対するウォッチが追加されます。また、[ウォッチ] ウィンドウで [クリックして追加] をクリックし、ウォッチ対象となる変数名を入力する方法でも、ウォッチ変数を設定できます。

図 3: [ウォッチ] ウィンドウの変数の検査

スクリプト行を実行するたびに、デバッガーは [ウォッチ] タブと [ローカル] タブ内の変数値を更新します。変更内容は赤色のテキストで示されます。ブレークポイントでデバッガーが停止したときに変数値を変更するには、ウォッチ一覧の値をクリックし、新しい値を入力し、Enter キーを押します。

コール スタックの検査

デバッガーがブレークポイントで実行を一時停止しているときは、[コール スタック] タブに実行コンテキストの現在の一覧が表示されます。スタック内を移動し、[ローカル] タブの実行コンテキストで変数をダブルクリックして検査します。

コンソールを使用したコード ステートメントの実行

デバッガーの [コンソール] タブは、スクリプト ステートメントを動的に実行するためのコンソールです。有効なステートメントか変数名を入力し、Enter キーを押すか、[スクリプトの実行] をクリックするだけで、現在のページ内のコンテキストのステートメントが実行されます。

変数値を設定するには、標準の割り当て構文を使用します。

s = 'my query string' 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 = %d and variable y = %d", x, y)

[コンソール] タブに表示するメッセージを選択するには、フィルターを設定します。これを行うには、[コンソール] ウィンドウを右クリックし、[フィルター] をポイントして、フィルターを選択します。チェック マークの付いたフィルターが有効になります。クリックするたびに、有効/無効が切り替わります。

関連トピック

• Internet Explorer 8 の開発者ツールの概要
• Internet Explorer 8 開発者ツールの GUI リファレンス
• 開発者ツール : スクリプト プロファイラーの概要
• 開発者ツール : キーボード ショートカット