TIPSChromeコメントを書く季節外れの風邪を引いてしまった網干です、皆さんも体調管理には気を付けましょう。Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。先週は「ブレークポイントを張る」と「プログラムの途中で変数の値を変更する」という内容の記事を書かせていただきました。前回の内容は本記事では説明を省きますので、詳細が気になる方は下記リンクをクリックしてください。ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法ぼーっとしていたら三連休が終わってしまいました...、悲しい気持ちの網干です。Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を...さて、今回は前回で説明しきれなかった下記の項目について書かせていただきます。それではさっそく、各機能の説明をしていきます。前回と同じように、ストップウォッチのようなスクリプトを使いながら説明を行います。初めに、ストップウォッチのスタートボタンを押します。カウンタが動いている状態で、右上の一時停止ボタンを押します。すると...ブレークポイントで止まっている状態と同じ画面になりました。これは、プログラムがcount関数に入る直前で止まっている状態になります。このように、一時停止ボタンはプログラムを一時的に止めることができます。次に、一時停止したプログラムを再度動かしてみましょう。右上のアイコンを確認すると、一時停止ボタンが再生ボタンに変化しています。再生ボタンを押してみましょう。ストップウォッチがまた動き始めましたね!これがプログラムの「実行開始」と「実行停止」になります。「ステップオーバー」は関数内の処理を一行ずつ行う機能になります。関数の動きが正しいかどうか確認を行う際に使用することが多いです。使用例としては...関数内にブレークポイントを張ります。ストップウォッチをスタートさせます。すると、ブレークポイントで処理が止まります。sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。右上のステップオーバーボタンを押してみましょう。期待通り、sec変数は1になりました。プログラムは再開せずに、次の行で止まっています。ここで、ステップオーバーボタンをもう一度押して、別関数の実行直前で止めてみます。この状態でステップオーバーボタンを押すと、関数を実行してから次の行で止まります。このように、ステップオーバーは関数内の処理のみに注目して確認を行う機能になります。ステップイン「ステップイン」は別関数の処理も含めて一行ずつ処理を行う機能になります。一連の処理が正しいかどうか確認を行う際に使用することが多いです。使用例としては...関数内にブレークポイントを張ります。ストップウォッチをスタートさせます。すると、ブレークポイントで処理が止まります。sec++の行に入ってきたので、次の処理でsec変数は1になるはずです。右上のステップインを押してみましょう。期待通り、sec変数は1になりました。プログラムは再開せずに、次の行で止まっています。ここで、ステップインをもう一度押して、別関数の実行直前で止めてみます。この状態でステップインを押すと、関数の中に入って処理が止まります。このように、ステップインは別関数の処理も含めて一行ずつ処理を行う機能になります。ステップアウト「ステップアウト」は関数内の処理を終わらせて、関数を抜けた後にプログラムを停止させる機能になります。使用例としては...関数内にブレークポイントを張ります。ストップウォッチをスタートさせます。すると、ブレークポイントで処理が止まります。count関数の確認は済んだので、この関数は確認しません。そのため、右上のステップアウトボタンを押します。すると、プログラムが関数を終わらせて、関数を抜けた後にプログラムを停止させます。(関数が実行されたのでsec変数が”1′′になっています)このように、ステップアウトは関数を抜けた後にプログラムを停止させる機能になります。最後にいかがでしたか?今回はプログラムの開始/停止に関する内容を書かせていただきました。前回と今回の内容で、スムーズにjavascriptのデバッグができるハズです。続きの記事を書かせていただきます!ではまた!この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。裕介Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。-URL平成28年「上溝夏祭り」たっぷり2日間フル参加まずはお家を調査・診断!!一友ビルドテック様のチラシを制作させていただきました。Animateを利用したアニメーションを作ってみる。超初心者なのでプログラミング学習のProgeteをやってみました。小・中学生プログラミングコンテスト」を開催しました!2016-7-18お祭りやイベントにぴったり!お祭り用象の耳のチラシ&WEBサイトを制作しました!2014-12-5塗装で新築のように!一友ビルドテック様のチラシを制作させていただきました。2016-8-10横浜市港北の格安板金『フレエム屋』フレーム修理も出来る技術力で任せて安心!フレーム屋様のWEBサイトをスマホ対応させていただきました。ホームページ制作、WEBマーケティングページ上部へ戻る。