季節外れの風邪を引いてしまった網干です、皆さんも体調管理には気を付けましょう。

今回は、先週に引き続きGoogle Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。

先週は「ブレークポイントを張る」と「プログラムの途中で変数の値を変更する」という内容の記事を書かせていただきました。
前回の内容は本記事では説明を省きますので、詳細が気になる方は下記リンクをクリックしてください。

さて、今回は前回で説明しきれなかった下記の項目について書かせていただきます。
①実行開始/停止
②ステップオーバー
③ステップイン
④ステップアウト
※なお、Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

それではさっそく、各機能の説明をしていきます。

実行開始/停止

前回と同じように、ストップウォッチのようなスクリプトを使いながら説明を行います。

まず初めに、ストップウォッチのスタートボタンを押します。
カウンタが動いている状態で、右上の一時停止ボタンを押します。

すると…

ブレークポイントで止まっている状態と同じ画面になりました。
これは、プログラムがcount関数に入る直前で止まっている状態になります。
このように、一時停止ボタンはプログラムを一時的に止めることができます。

では次に、一時停止したプログラムを再度動かしてみましょう。

右上のアイコンを確認すると、一時停止ボタンが再生ボタンに変化しています。
再生ボタンを押してみましょう。

ストップウォッチがまた動き始めましたね！
これがプログラムの「実行開始」と「実行停止」になります。

ステップオーバー

「ステップオーバー」は関数内の処理を一行ずつ行う機能になります。
関数の動きが正しいかどうか確認を行う際に使用することが多いです。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。
では、右上のステップオーバーボタンを押してみましょう。

期待通り、sec変数は1になりました。
また、プログラムは再開せずに、次の行で止まっています。
ここで、ステップオーバーボタンをもう一度押して、別関数の実行直前で止めてみます。

この状態でステップオーバーボタンを押すと、関数を実行してから次の行で止まります。

このように、ステップオーバーは関数内の処理のみに注目して確認を行う機能になります。

ステップイン

「ステップイン」は別関数の処理も含めて一行ずつ処理を行う機能になります。
一連の処理が正しいかどうか確認を行う際に使用することが多いです。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。
では、右上のステップインを押してみましょう。

期待通り、sec変数は1になりました。
また、プログラムは再開せずに、次の行で止まっています。
ここで、ステップインをもう一度押して、別関数の実行直前で止めてみます。

この状態でステップインを押すと、関数の中に入って処理が止まります。

このように、ステップインは別関数の処理も含めて一行ずつ処理を行う機能になります。

ステップアウト

「ステップアウト」は関数内の処理を終わらせて、関数を抜けた後にプログラムを停止させる機能になります。

使用例としては…

関数内にブレークポイントを張ります。

ストップウォッチをスタートさせます。
すると、ブレークポイントで処理が止まります。

count関数の確認は済んだので、この関数は確認しません。
そのため、右上のステップアウトボタンを押します。

すると、プログラムが関数を終わらせて、関数を抜けた後にプログラムを停止させます。
（関数が実行されたのでsec変数が”1″になっています）

このように、ステップアウトは関数を抜けた後にプログラムを停止させる機能になります。

最後に

いかがでしたか？
今回はプログラムの開始/停止に関する内容を書かせていただきました。
前回と今回の内容で、スムーズにjavascriptのデバッグができるハズです。
私はまだここまでの知識しかありませんが、更にデバッグの知識が増えた際には、
続きの記事を書かせていただきます！

ではまた！