記事の詳細

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

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

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

JavaScriptのプログラムをデバッグする方法Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法
ぼーっとしていたら三連休が終わってしまいました…、悲しい気持ちの網干です。今回は、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のデバッグができるハズです。
私はまだここまでの知識しかありませんが、更にデバッグの知識が増えた際には、
続きの記事を書かせていただきます!

ではまた!

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

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

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

網干 裕介

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

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

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

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

特集

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

AD

ページ上部へ戻る