Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法

menu

Home
ＷＥＢ制作 , ＴＩＰＳ
Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法

記事の詳細

Google ChromeのデベロッパーツールでJavaScriptのデバッグを行う方法

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

おおまかな内容としては…
①ブレークポイントを張る
②プログラムの途中で変数の値を変更する
上記に関して記載します。
※Google Chromeのバージョンは「51.0.2704.106 m」を使用します。

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

今回のブログの見出しはコチラです！

1 デバッグとは
2 デバッグの準備を行う
3 デベロッパーツールでブレークポイントを張る
4 デバッグ作業を行う
5 最後に

デバッグとは

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

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

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

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

デバッグの準備を行う

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

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

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

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

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

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

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

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

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

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

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

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

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

・xxx.html

<form name="TimeForm">
	<input type="button" value="スタート" onClick="timer1 = setInterval('count()', 1000)">
	<input type="button" value="ストップ" onClick="TimerStop()"><br>
	経過時間：<input type="text" name="text1" size="8" value="00:00:00">
</form>

1

2

3

4

5

経過時間：<input type="text" name="text1" size="8" value="00:00:00">

</form>

・xxx.js

hour = 0;
min = 0;
sec = 0;
startFlg = false;

function count(){
	sec++;
	startFlg = true;
	// 60秒に到達？
	if( sec == 60){
		min++;
		sec = 0;
		// 60分に到達？
		if( min == 60){
			hour++;
			min = 0;
		}
	}
	h = hour;
	m = min;
	s = sec;
	// 数値が1桁の場合は先頭に0を付けて"00"の形で統一
	if( h < 10 ){
		h = '0' + h;
	}
	if( m < 10 ){
		m = '0' + m;
	}
	if( s < 10 ){
		s = '0' + s;
	}
	// テキストエリアに時間を表示
	document.TimeForm.text1.value = h + ':' + m + ':' + s;
}

function TimerStop(){
	if(startFlg == true){
		// タイマーを止める
		clearInterval(timer1);
	}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

hour = 0;

min = 0;

sec = 0;

startFlg = false;

function count(){

sec++;

startFlg = true;

// 60秒に到達？

if( sec == 60){

min++;

sec = 0;

// 60分に到達？

if( min == 60){

hour++;

min = 0;

}

h = hour;

m = min;

s = sec;

// 数値が1桁の場合は先頭に0を付けて"00"の形で統一

if( h < 10 ){

h = '0' + h;

}

if( m < 10 ){

m = '0' + m;

}

if( s < 10 ){

s = '0' + s;

}

// テキストエリアに時間を表示

document.TimeForm.text1.value = h + ':' + m + ':' + s;

}

function TimerStop(){

if(startFlg == true){

// タイマーを止める

clearInterval(timer1);

}

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

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

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

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

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

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

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

1つ1つ確認するのは面倒なので、確認したい変数を全てWatchに登録しましょう！

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

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

デバッグ作業を行う

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

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

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

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

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

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

min変数の値をダブルクリックします。

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

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

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

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

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

最後に

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

ではまた！