記事の詳細

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

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

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

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

※なお、Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

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

実行開始/停止

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

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

すると…
JavaScriptデバッグ2_13

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

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

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

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

ステップオーバー

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

使用例としては…

関数内にブレークポイントを張ります。
JavaScriptデバッグ2_04

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

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

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

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

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

ステップイン

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

使用例としては…

関数内にブレークポイントを張ります。
JavaScriptデバッグ2_04

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

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

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

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

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

ステップアウト

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

使用例としては…

関数内にブレークポイントを張ります。
JavaScriptデバッグ2_04

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

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

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

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

最後に

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

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る