記事の詳細

ぼーっとしていたら三連休が終わってしまいました…、悲しい気持ちの網干です。
今回は、Google Chromeのデベロッパーツールを使って、JavaScriptのデバッグを行う方法を記載します。

おおまかな内容としては…
①ブレークポイントを張る
②プログラムの途中で変数の値を変更する

上記に関して記載します。
※Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

先週(7月14日)に吉見さんがデベロッパーツールに関しての記事を書かれていたので、
ネタを取られる前にデベロッパーツールの理解をより深めるために、関連した記事を書きます!
関連記事:【WEBサイトの色(カラーコード)が知りたい!】えっ!?拡張アプリは使わないの?

デバッグとは

“デバッグ”とはプログラムのバグを取り除く作業のことです。
デバッグを行うには、プログラムがどのように動いているのか確認をしなければなりません。
プログラムの動作を確認するには、下記のような方法があります。
①コンソール画面にログを出力する
②ログファイルを出力する

ですが、上記の方法はプログラムを動かして動作が完了するまで待機しなければなりません。
そのため、プログラムが複雑であったり、長い時間動かすことを想定したプログラムの場合は、デバッグ作業に大幅な時間を使うことになります。
また、非常に特殊な条件でしか発生しない分岐がある場合は、動作確認が不可能になってしまう場合もあります。

しかし、上記のようなデバッグで発生する問題を解決してしまう機能がデベロッパーツールには備わっています!
無料のツールなのに、どこまで素晴らしい機能を備えているのか…。
Google Chromeさんは非常に恐ろしいです。

ということで、早速デベロッパーツールを使ってデバッグをしてみましょう!

デバッグの準備を行う

まずはじめに、Google Chromeを起動してデバッグを行うページを開いてください。
ページ内にカーソルを合わせて”F12″キーを押すと、横(または下)にデベロッパーツールのウインドウが表示されます。
JavaScriptデバッグ_16

今回は吉見さんの時とは違って「Elements」タブではなく「Sources」タブを表示します。
「Sources」の画面でスクリプトを記載したファイルを選択してソースコードを表示させます。
JavaScriptデバッグ_17

もし「Sources」にファイルが存在しない場合は、右側の「…」→「Go to file…」を選択してください。
JavaScriptデバッグ_18

ファイルやらなにやらの一覧が表示されるので、その中からスクリプトを記載したファイルを選択してください。
JavaScriptデバッグ_19

これで準備は完了しました。
では次に、デバッグで重要なブレークポイントを張っていきましょう。

デベロッパーツールでブレークポイントを張る

ブレークポイントとは、実行中のプログラムを停止させるポイントになります。
…たった1行でブレークポイントの説明をしたので、湧き上がる感動が一切ありませんでしたが…。
Google Chromeのデベロッパーツールで、

実行中のプログラムを停止させるポイントが設定できるのです!

そう!これがデベロッパーツールの凄いところなんです!
基本的に、デバッグはプログラムが動いた結果を見て動作を確認しなければならないのですが、
プログラムが動いている最中に確認ができてしまうのです!

さて、ではどうやってブレークポイントを張るのかというと…。

ソースコードが表示されている画面で、プログラムを止めたい行にマウスカーソルを合わせて左クリックします。
JavaScriptデバッグ_01

クリックした行数が青色になって、右のウインドウの「Breakpoints」に行の内容が表示されます。
はい、ブレークポイントの設置は以上で完了です。
本当に使いやすいUIですね。何か悔しい。

では、ブレークポイントを張った状態でプログラムを動作させてみましょう。
今回はストップウォッチのようなプログラムを組んで動作させました。
以下、ソースコードになります。

・xxx.html

・xxx.js

ストップウォッチの設置が完了したのでスタートボタンを押してみましょう。すると…
JavaScriptデバッグ_02

ストップウォッチが止まり、画面に「Paused in debugger」と書かれたメニューが表示されたり、
ブレークポイントを張った行が青色で囲われたりしています。
これは、プログラムがブレークポイントの位置に達したため、停止している状態になります。

今回ブレークポイントを張った位置は「sec変数が60になったら処理を行う」という条件で入ってくる部分になります。
※sec変数は秒数を格納しています。
では、本当にsec変数は60になっているのか、確認してみましょう。

デベロッパーツールの「Watch」タブの「+」を押します。
JavaScriptデバッグ_03

sec変数がどうなっているか確認したいので、「sec」を入力してEnterキーを押します。すると…
JavaScriptデバッグ_05
JavaScriptデバッグ_06

sec変数の現在の値が表示されました!
期待通り、sec変数が60になってから条件の中に入っていますね!

ちなみに、変数の確認方法はもう一つあります。
プログラムの停止中に、変数にマウスカーソルを当てると変数の値が表示されます。
JavaScriptデバッグ_07

1つ1つ確認するのは面倒なので、確認したい変数を全てWatchに登録しましょう!
JavaScriptデバッグ_09

登録した変数の内容が全て表示されましたね!
※ブレークポイントの位置でプログラムが停止しているため、min++が実行されていないことにも注目してください。

これで知りたい情報を全て知ることが可能になりました。

デバッグ作業を行う

ブレークポイントを張ることで、プログラムを停止させて変数の値を確認することができるようになりました。
しかし、ブレークポイントを張って変数の値を確認するだけでは、
デバッグの方法としてはコンソールの表示やログの出力と大差ありません。

今回の参考プログラムを見ると、次に確認したい条件はif(min == 60)となっているため、
60分間待ってから確認をしなければなりません。
この無駄な時間を解消してくれる凄い機能が、デベロッパーツールに備わっています!

では、何をするのかというと…。

ブレークポイントでプログラムが止まっている状態で、変数の値を変更しちゃいます。
今回の例では、minの値を60にして条件に入ることを確認しちゃいます。

では、実際にやってみましょう。
ブレークポイントを張ってプログラムを止めたら、
右のウインドウの「Scope」タブから「Local」→「this: Window」をクリックします。
JavaScriptデバッグ_27

リストに項目が大量に並んでいますが、下の方へスクロールしてmin変数を探します。
JavaScriptデバッグ_22

min変数の値をダブルクリックします。
JavaScriptデバッグ_23

min変数に59を入力します。
※min++の実行がまだなので、min変数に59を入力すると次の行で60になります。
JavaScriptデバッグ_24

if(min ==60)の条件式にブレークポイントを張ってから、
右上の矢印ボタンを押して再度プログラムを動かします。
JavaScriptデバッグ_28
JavaScriptデバッグ_30

min変数が60になっていますね!
ということは、if(min ==60)の条件式の中に入るはず…。
右上の湾曲した矢印のアイコンをクリックして、プログラムを1行だけ実行させます。
JavaScriptデバッグ_29
JavaScriptデバッグ_26

条件式の中に入りましたね!
無事にmin変数を60に変更することができました。

このように、プログラムの途中で変数の値を変更させることで、
無駄な時間を省いてデバッグができるようになります!

最後に

いかがでしたか?
今回はブレークポイントと変数の代入に関して記事を書かせていただきました。
最低限のデバッグは今回の記事で可能ですが、デベロッパーツールにはもっと便利な機能があります。
今回は「ステップオーバー」「ステップイン」「ステップアウト」等のデバッグに欠かせない機能の
説明を省いているので、どこかのタイミングでブログに書こうと思います。

ではまた!

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

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

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

網干 裕介

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

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

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

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

特集

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

AD

お知らせ

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