クイック スタート: デバッガーのナビゲーション (JavaScript)
このクイック スタートでは、Visual Studio デバッガー内を移動する方法と、セッションでのプログラムの状態を表示する方法を示します。
このクイック スタートは、Visual Studio でのデバッグを初めて行う開発者、および Visual Studio のデバッグ セッションでの移動について理解を深めたい開発者を対象とした内容になっています。デバッグ技法自体については説明しません。サンプル コードの関数は、このトピックで説明しているデバッグ手順を示すためだけに設計されています。アプリまたは関数の設計に関するベスト プラクティスには従っていません。実際、関数やアプリ自体ではたいした処理は何も行われていないことがすぐにわかります。
このクイック スタートの各セクションは、できるだけ相互に依存しないように設計されています。したがって、既によく理解している情報に関するセクションは省略してかまいません。また、サンプル アプリを作成する必要はありません。ただし、できる限り簡単にしてあるので、作成することをお勧めします。
**デバッガーのショートカット キー。**Visual Studio デバッガーのナビゲーションは、マウスとキーボードの両方に最適化されます。このトピックの手順の多くでは、かっこ付きでキーボード アクセラレータまたはショートカット キーが示されています。たとえば、(キーボード: F5) は、F5 キーを押すとデバッガーの実行が開始または継続することを示します。
注意
モジュール パターン
Windows ストア アプリでは、JavaScript のモジュール パターンを使用してデータと関数をページ内にカプセル化することがよくあります。モジュール パターンでは、自己実行形式の単一の匿名クロージャを使用して、ページの機能をグローバル名前空間から分離します。このトピックでは、そのような関数をモジュールと呼びます。
このトピックの内容
以下の方法について説明します。
サンプル アプリを作成する
ブレークポイントを設定してそこまで実行し、関数にステップ インして、プログラムのデータを調べる
関数をステップ イン、ステップ オーバー、ステップ アウトする
条件付きブレークポイントを設定し、カーソルまで実行して、変数を表示する
[ローカル] ウィンドウで変数のデータを表示する
オブジェクトの変数データとプロトタイプ チェーンを表示する
スコープ チェーンのデータを調べる
[呼び出し履歴] ウィンドウを使用してコードに移動する
サンプル アプリを作成する
デバッグはコードに関することなので、サンプル アプリでは、Windows ストア アプリのフレームワークをソース ファイルの作成だけに使用し、デバッグ セッション内のナビゲーション方法およびプログラムの状態を調べる方法がわかるようにします。呼び出すコードはすべて、default.js ファイルの module 関数から呼び出されます。コントロールは追加されず、イベントは処理されません。
空の JavaScript Windows ストア アプリを作成します。Visual Studio を開きます。ホーム ページで、[新しいプロジェクト] リンクをクリックします。[新しいプロジェクト] ダイアログ ボックスで、[インストール済み] ボックスの一覧の [JavaScript] をクリックし、[Windows ストア] をクリックします。プロジェクト テンプレートの一覧で、[新しいアプリケーション] をクリックします。新しいソリューションとプロジェクトが作成され、default.htm ファイルがコード エディターに表示されます。
ページに読み込まれるスクリプト ファイルに注意してください。
base.js および ui.js ファイルによって、JavaScript 用 Windows ライブラリが作成されます。JavaScript 用 Windows ライブラリは一連の JavaScript および CSS ファイルであり、JavaScript を使用して Windows ストア アプリを簡単に作成できるようにします。これを HTML、CSS、および Windows ランタイムと共に使用して、アプリを作成します。
コードは default.js ファイルで開始します。
default.js ソース ファイルを開きます。ソリューション エクスプローラーで、[js] ノードを開いて default.js を選択します。
ページの内容をサンプル コードに置き換えます。 default.js ファイルの内容をすべて削除します。「デバッガー ナビゲーションのサンプル コード (JavaScript)」に移動し、JavaScript のセクションに記載されているコードをクリップボードにコピーします (このクイック スタート ページに戻るには、ブラウザーまたはヘルプ ビューアーの [戻る] をクリックしてください)。Visual Studio エディターで、空にした default.js にコードを貼り付けます。Ctrl + S を押してファイルを保存します。
以上でこのトピックの例に従って作業を進めることができます。
ブレークポイントを設定してそこまで実行し、関数にステップ インして、プログラムのデータを調べる
デバッグ セッションを開始する最も一般的な方法は、[デバッグ] メニューの [デバッグ開始] をクリックすることです (キーボード: F5)。アプリが開始し、ブレークポイントに達するか、実行が手動で中断されるか、例外が発生するか、アプリが終了するまで実行されます。
デバッガーで実行が中断されているときは、変数の上にマウスを置くことによって、アクティブな変数の値をデータ ヒントで確認できます。
アプリケーションの実行を中断した後 (デバッガーへの割り込みともいいます)、それ以降のプログラム コードの実行方法を制御します。1 行ずつ実行したり、関数呼び出しから関数自体に移動したり、呼び出されている関数をシングル ステップで実行したりできます。これらの手順は、アプリのステップ実行と呼ばれます。また、アプリの普通の実行を再開したり、設定してある次のブレークポイントまで実行したり、カーソルを置いた行まで実行したりすることもできます。デバッグ セッションはいつでも停止できます。デバッガーは、必要なクリーンアップ操作を行って実行を終了するように設計されています。
.gif "Hh924759.collapse_all(ja-jp,VS.110).gif")
例 1
この関数では、default.js の module 関数の本体にブレークポイントを設定します。ここで、最初のユーザー ステートメントが呼び出されます。次に、関数にステップ インし、デバッガー データヒントで変数の値を表示して、デバッグを停止します。
ブレークポイントを設定します。 app.start() の呼び出しの直後にあるステートメント callTrack = "module function"; にブレークポイントを設定します。ソース コード エディターの網掛けされた余白で行を選択します (キーボード: 行にカーソルを置き、F9 キーを押します)。
.png "example1 でのブレークポイントの設定")
ブレークポイント アイコンが余白に表示されます。
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。
アプリの実行が開始し、ブレークポイントを設定したステートメントの直前で実行が中断します。余白の現在行アイコンによって場所が示され、現在のステートメントが強調表示されます。
.png "ブレークポイントまで実行")
アプリの実行を制御できるようになり、プログラムのステートメントをステップ実行しながらプログラムの状態を確認できます。
関数にステップ インします。 [デバッグ] メニューの [ステップ イン] をクリックします (キーボード: F11)。
.png "コード行へのステップ イン")
デバッガーが次の行である example1 関数の呼び出しに移動します。[ステップ イン] を再びクリックします。デバッガーが example1 関数の最初のコード行に移動します。強調表示された行はまだ実行されていませんが、関数は呼び出し履歴に読み込まれ、ローカル変数のメモリは割り当てられています。
コード行にステップ インするとき、デバッガーは次の操作のいずれかを実行します。
次のステートメントがソリューション内の関数の呼び出しではない場合、デバッガーはステートメントを実行し、次のステートメントに移動して、実行を中断します。
ステートメントがソリューション内の関数の呼び出しの場合、デバッガーは呼び出された関数の最初の行に移動して、実行を中断します。
終了ポイントに到達するまで、example1 のステートメントのステップ インを続けます。関数の終了の中かっこが強調表示されます。
**データ ヒントで変数の値を表示します。**終了ポイントに到達するまで、example1 のステートメントのステップ インを続けます。関数の終了の中かっこが強調表示されます。変数名の上にマウス ポインターを置くと、変数の名前と値がデータ ヒントに表示されます。
.png "データヒントの変数値の表示")
callTrack 変数のウォッチを追加します。 callTrack 変数は、このクイック スタート全体で、例において呼び出された関数を示すために使用されています。変数の値を見やすくするため、ウォッチ ウィンドウに追加します。エディターで変数名を選択し、ショートカット メニューの [ウォッチ式の追加] をクリックします。
.png "変数のウォッチ")
ウォッチ ウィンドウでは複数の変数を確認できます。データ ヒント ウィンドウの値など、ウォッチ対象の変数の値は、実行が中断されるたびに更新されます。ウォッチ対象の変数は、デバッグ セッション間で保存されます。
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
関数をステップ イン、ステップ オーバー、ステップ アウトする
親関数によって呼び出される関数へのステップ インに対し、関数のステップ オーバーでは、子関数が実行された後、親が再開すると、呼び出し側の関数で実行が中断されます。関数の動作がよくわかっていて、その実行が調査中の問題に影響を与えないことが明らかな場合などは、関数をステップ オーバーします。
関数の呼び出しを含まないコード行をステップ オーバーすると、行へのステップ インと同じように行が実行されます。
子関数をステップ アウトすると、子関数の実行が続けられ、子関数から呼び出し側関数に戻った後で、実行が中断されます。長い関数で残りの部分は重要ではないと判断した場合など、ステップ アウトを使用できます。
関数のステップ オーバーでもステップ アウトでも、関数は実行されます。
.png "メソッドのステップ イン、ステップ オーバー、およびステップ アウト")
例 2
この例では、関数のステップ イン、ステップ オーバー、およびステップ アウトを行います。
モジュール内の example2 関数を呼び出します。 module 関数を編集し、var callTrack = "module function" の後の行を example2(); に置き換えます。
.png "example2 関数の呼び出し")
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。デバッガーの実行がブレークポイントで中断します。
コード行をステップ オーバーします。 [デバッグ] メニューの [ステップ オーバー] をクリックします (キーボード: F10)。デバッガーは、ステートメントのステップ インと同じ方法で、var callTrack = "module function" ステートメントを実行します。
example2 および example2_a にステップ インします。 F11 キーを押して example2 関数にステップインします。var x = example2_a(); 行に到達するまで example2 のステートメントのステップ インを続けます。再びこの行にステップ インして、example2_a のエントリ ポイントに移動します。example2 に戻るまで example2_a の各ステートメントのステップ インを続けます。
.png "関数のステップ オーバー")
関数をステップ オーバーします。 example2 の次の行 var y = example2_a(); は基本的に前の行と同じであることに注意してください。この行は安全にステップ オーバーできます。F10 キーを押して、example2 の再開から example2_a のこの 2 回目の呼び出しまで移動します。callTrack 文字列で example2_a 関数が 2 回実行されたことが示されている点に注意してください。
関数をステップ アウトします。 F11 キーを押して example2_b 関数にステップインします。example2_b が example2_a と大差ないことに注意してください。関数をステップ アウトするには、[デバッグ] メニューの [ステップ アウト] をクリックします (キーボード: Shift + F11)。callTrack 変数で、example2_b が実行されたこと、およびデバッガーが example2 の再開ポイントに戻ったことが示されていることに注意してください。
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
条件付きブレークポイントを設定し、カーソルまで実行して、変数を表示する
条件付きブレークポイントでは、デバッガーが実行を中断する条件を指定します。条件は、true または false として評価できる任意のコード式によって指定します。たとえば、条件付きブレークポイントを使用すると、変数が特定の値に到達した場合にのみ、頻繁に呼び出される関数でのプログラムの状態を確認できます。
カーソルまでの実行は、一度だけのブレークポイントを設定することと同じです。実行が中断されたら、ソースで行を選択し、選択した行に到達するまで実行を再開できます。たとえば、関数内のループをステップ実行していて、ループのコードが正しく実行していることがわかったものとします。そのような場合、ループのすべての反復をステップ実行する代わりに、ループの実行が終了した後に配置したカーソルまで実行できます。
データ ヒントや他のデータ ウィンドウの行で変数の値を表示することが困難な場合があります。デバッガーでは、スクロール可能なウィンドウに書式設定された値が表示されるテキスト ビジュアライザーで、文字列、HTML、Xml を表示できます。
例 3
この例では、ループの特定の繰り返しで中断するように条件付きブレークポイントを設定し、ループの後に配置したカーソルまで実行します。また、テキスト ビジュアライザーで変数の値を表示します。
モジュール内の example3 関数を呼び出します。 module 関数を編集し、var callTrack = "module function"; の後の行を example3(); に置き換えます。
.png "example3 の呼び出し")
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。module 関数内のブレークポイントでデバッガーの実行が中断します。
example3 関数にステップ インします。 [デバッグ] メニューの [ステップ イン] をクリックし (キーボード: F11)、example3 関数のエントリ ポイントに移動します。関数のステップ インを続けて、for ブロックのループを 1 または 2 回繰り返します。1000 回の繰り返しすべてをステップ実行するには長い時間がかかります。
**条件付きブレークポイントを設定します。**コード ウィンドウの左側の余白で、s += i.toString() + "\n"; という行を右クリックし、ショートカット メニューの [条件] をクリックします。
[条件] チェック ボックスをオンにして、テキスト ボックスに「i == 500;」と入力します。[true の場合] オプションを選択し、[OK] をクリックします。ブレークポイントでは、for ループの 500 回目の繰り返しでの値を確認できます。条件付きブレークポイント アイコンは白い十字が目印です。
.png "条件付きブレークポイント アイコン")
ブレークポイントまで実行します。 [デバッグ] メニューの [続行] をクリックします (キーボード: F5)。i で一時停止し、i の現在の値が 500 であることを確認します。変数 s が 1 行に表示され、データ ヒント ウィンドウよりかなり長いことにも注意してください。
文字列変数を表示します。 s のデータ ヒントで虫眼鏡アイコンをクリックします。
テキスト ビジュアライザー ウィンドウが表示され、文字列の値が複数行の文字列として示されます。
.png "テキスト ビジュアライザーのデバッグ")
カーソルまで実行します。 callTrack += "->example3"; 行を選択し、ショートカット メニューの [カーソル行の前まで実行] をクリックします (キーボード: Ctrl + F10)。デバッガーは、ループの繰り返しを完了して、カーソルの行で実行を中断します。
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
[カーソル行の前まで実行] を使用してコードに戻り、ブレークポイントを削除します。
Microsoft またはサードパーティから提供されているライブラリ コードにステップ インしている場合、カーソル行の前まで実行すると便利な場合があります。ライブラリ コードのステップ実行は役に立ちますが、長い時間がかかることがあります。また、通常は、自分のコードよりはるかに興味があります。この演習では、その方法を説明します。
app.start の呼び出しにブレークポイントを設定します。 module 関数で、app.start() の行にブレークポイントを設定します。
ブレークポイントまで実行し、ライブラリ関数にステップ インします。
app.start() にステップ インすると、エディターに base.js のコードが表示されます。さらに数行ステップ インします。
関数をステップ オーバーしてステップ アウトします。 base.js のコードをステップ オーバー (F10) およびステップ アウト (Shift + F11) すると、開始関数の複雑さと長さの調査が望んでいるものとは異なることがわかる場合があります。
**自分のコードにカーソルを設定して、そこまで実行します。**コード エディターで default.js ファイルに切り替えます。app.start() の後の最初のコード行を選択します (コメント行または空白行まで実行することはできません)。ショートカット メニューの [カーソル行の前まで実行] をクリックします。デバッガーは app.start の関数の実行を続行し、ブレークポイントで実行を中断します。
[ローカル] ウィンドウで変数のデータを表示する
[ローカル] ウィンドウは、現在実行中の関数のスコープ チェーンに含まれるパラメーターと変数のツリー ビューです。
オブジェクトの変数データとプロトタイプ チェーンを表示する
配列オブジェクトをモジュール関数に追加します。 module 関数を編集し、var callTrack = "module function" の後の行を var myArray = new Array(1, 2, 3); に置き換えます。
.png "myArray 定義")
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。デバッガーの実行がブレークポイントで中断します。この行までステップ インします。
[ローカル] ウィンドウを開きます。 [デバッグ] メニューの [ウィンドウ] をポイントし、[ローカル] をクリックします (キーボード: Alt + 4)。
モジュール関数でローカル変数を調べます。[ローカル] ウィンドウでは、現在実行中の関数 (module 関数) の変数が、ツリーの最上位ノードとして表示されます。関数に入ると、JavaScript はすべての変数を作成し、undefined という値を設定します。関数内で定義されている関数の値はテキストです。
![[ローカル] ウィンドウ](images/hh924759.dbg_jsnav_locals_window(ja-jp,vs.110).png "[ローカル] ウィンドウ")
callTrack および myArray の定義をステップ実行します。[ローカル] ウィンドウで callTrack 変数および myArray 変数を探します。2 つの定義をステップ オーバーし (F10)、Value フィールドと Type フィールドが変更されていることを確認します。[ローカル] ウィンドウでは、前回のブレーク以降に変更された変数の値が強調表示されます。
myArray オブジェクトを調べます。 myArray 変数を展開します。配列の各要素が、Array オブジェクトの継承階層を含む [プロトタイプ] ノードに一覧表示されます。このノードを展開します。
![[ローカル] ウィンドウのプロトタイプ チェーン](images/hh924759.dbg_jsnav_locals_proto_chain(ja-jp,vs.110).png "[ローカル] ウィンドウのプロトタイプ チェーン")
[メソッド] ノードには、Array オブジェクトのすべてのメソッドが一覧表示されます。
[プロトタイプ] ノードには、Array の派生元である Object オブジェクトのプロトタイプが含まれます。[プロトタイプ] ノードは再帰的である場合があります。オブジェクト階層内の各親オブジェクトは、その子の [プロトタイプ] ノードで記述されています。
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
スコープ チェーンのデータを調べる
関数のスコープ チェーンには、アクティブであり、関数で到達可能なすべての変数が含まれます。グローバル変数は、現在実行中の関数を定義している関数内で定義されているオブジェクト (関数を含みます) と同様に、スコープ チェーンの一部です。たとえば、default.js の module 関数で定義されている callTrack 変数は、module 関数で定義されているすべての関数から到達可能です。各スコープは [ローカル] ウィンドウで個別に一覧表示されます。
現在実行中の関数の変数はウィンドウの先頭に表示されます。
スコープ チェーン内の関数スコープの変数は、その関数の [スコープ] ノードに一覧表示されます。スコープ関数は、現在の関数を定義している関数から、チェーンの最も外側の関数まで、チェーン内での順番で一覧表示されます。
[グローバル] ノードには、すべての関数の外側で定義されているグローバル オブジェクトが一覧表示されます。
スコープ チェーンはわかりにくいことがあり、例で示すとよくわかります。次の例を見ると、module 関数によってそれ自体のスコープが作成されている方法、およびクロージャを作成することで別のレベルのスコープを作成する方法がわかります。
例 4
モジュール内の example4 関数を呼び出します。 module 関数を編集し、var callTrack = "module function" の後の行を example4() に置き換えます。
.png "example4 の呼び出し")
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。デバッガーの実行がブレークポイントで中断します。
[ローカル] ウィンドウを開きます。必要に応じて、[デバッグ] メニューの [ウィンドウ] をポイントし、[ローカル] をクリックします (キーボード: Alt + 4)。ウィンドウに module 関数内のすべての変数と関数が一覧表示され、[グローバル] ノードも含まれることに、注意してください。
グローバル変数を調べます。 [グローバル] ノードを展開します。[グローバル] 内のオブジェクトや変数は、JavaScript 用 Windows ライブラリによって設定されたものです。グローバル スコープには独自の変数を追加できます。
example4 にステップ インし、ローカル変数およびスコープ変数を調べます。 example4 関数にステップ インします (キーボード: F11)。example4 が module 関数で定義されるため、module 関数は、親スコープになります。example4 は module 関数の関数を呼び出し、変数にアクセスできます。[ローカル] ウィンドウで [スコープ] ノードを展開し、module 関数と同じ変数が含まれることを確認してください。
.png "example4 メソッドのスコープ")
example4_a にステップ インし、ローカル変数とスコープ変数を調べます。続けて example4 をステップ インし、example4_a の呼び出しにステップ インします。ローカル変数が example4_a のものになり、[スコープ] ノードには引き続き module 関数の変数が保持されていることに注意してください。example4 の変数はアクティブですが、example4_a では到達できず、スコープ チェーンの一部ではなくなっています。
**multipyByA にステップ インし、ローカル変数とスコープ変数を調べます。**残りの example4_a をステップ実行し、var x = multilpyByA(b); の行にステップ インします。
関数の変数 multipyByA は、クロージャである multiplyClosure 関数に設定されました。multipyClosure は、内部関数 mulitplyXby を定義して返し、パラメーターおよび変数をキャプチャし (閉じ込め) ます。クロージャでは、返される内部関数は外部関数のデータにアクセスでき、独自のスコープ レベルを作成します。
var x = multilpyByA(b); にステップ インすると、mulitplyXby 内部関数の return a * b; 行に移動します。
[ローカル] ウィンドウでは、multiplyXby の唯一のローカル変数である b パラメーターだけが表示されていますが、新しい [スコープ] レベルが追加されています。このノードを展開すると、multiplyClosure のパラメーター、関数、変数が含まれ、さらに multiplyXby の最初の行で呼び出されている a 変数も含まれることがわかります。2 番目の [スコープ] ノードを調べると、multiplyXby が次の行でアクセスしているモジュール関数の変数が表示されます。
![[ローカル] ウィンドウのクロージャのスコープ](images/hh924759.dbg_jsnav_scope_mulitplyxby(ja-jp,vs.110).png "[ローカル] ウィンドウのクロージャのスコープ")
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
[呼び出し履歴] ウィンドウを使用してコードに移動する
呼び出し履歴は、アプリケーションの現在のスレッドで実行されている関数についての情報を含むデータ構造です。ブレークポイントにヒットすると、スタック上でアクティブなすべての関数が [呼び出し履歴] ウィンドウに一覧表示されます。現在実行中の関数が、[呼び出し履歴] ウィンドウのリストの先頭に表示されます。スレッドを開始した関数は、リストの最後にあります。その間の関数は、開始関数から現在の関までの数呼び出しパスを示します。
現在実行中の関数までの呼び出しパスの表示に加えて、[呼び出し履歴] ウィンドウはコード エディター内のコードへの移動にも使用できます。この機能は、複数のファイルの作業を行っていて、特定の関数にすばやく移動する場合に便利です。
例 5
この例では、5 つのユーザー定義関数を含む呼び出しパスにステップ インします。
モジュール内の example5 関数を呼び出します。 module 関数を編集し、var callTrack = "module function"; の後の行を example5(); に置き換えます。
.png "example5 の呼び出し")
ブレークポイントまで実行します。 [デバッグ] メニューの [デバッグの開始] をクリックして、デバッグ セッションを開始します (キーボード: F5 キー)。モジュール関数内のブレークポイントでデバッガーの実行が中断します。
[呼び出し履歴] ウィンドウを開きます。 [デバッグ] メニューの [ウィンドウ] をクリックし、[呼び出し履歴] を選択します (キーボード: Alt + 7)。[呼び出し履歴] ウィンドウに 2 つの関数が表示されます。
[グローバル コード] は、呼び出し履歴の下端にある module 関数のエントリ ポイントです。
[Anonymous function] (匿名関数) には、module 関数内で実行が中断されている行が示されます。これは、呼び出し履歴の先頭にあります。
関数にステップインして example5_d 関数に到達します。 [デバッグ] メニューの [ステップ イン] をクリックし (キーボード: F11)、example5_d 関数のエントリ ポイントに達するまで呼び出しパスの呼び出しを実行します。ある関数で別の関数が呼び出されるたびに、呼び出す関数の行番号が保存され、呼び出される関数がスタックの先頭に表示されることに注意してください。呼び出す関数の行番号は、呼び出す関数の実行が中断しているポイントです。黄色の矢印は、現在実行中の関数を示します。
![[呼び出し履歴] ウィンドウ](images/hh924759.dbg_jsnav_callstack_windows(ja-jp,vs.110).png "[呼び出し履歴] ウィンドウ")
[呼び出し履歴] ウィンドウを使用して example5_a のコードに移動し、ブレークポイントを設定します。[呼び出し履歴] ウィンドウで、example5_a リスト項目を選択し、ショートカット メニューの [ソースに移動] をクリックします。コード エディターで、関数の戻り行にカーソルが設定されます。この行にブレークポイントを設定します。現在実行中の行は変更されないことに注意してください。エディターのカーソルだけが移動します。
関数にステップ インし、ブレークポイントまで実行します。 example5_d のステップ インを続けます。関数から戻ると、関数が呼び出し履歴から削除されることに注意してください。F5 キーを押してプログラムの実行を続行します。前の手順で作成したブレークポイントで停止します。
デバッグを停止します。 [デバッグ] メニューの [デバッグの停止] をクリックします (キーボード: Shift + F5)。これによりデバッグ セッションが終了します。
参照
概念
クイック スタート: デバッガーのナビゲーション (JavaScript)
クイック スタート: アプリのデバッグ (JavaScript)