Chrome DevTools で JavaScript をデバッグしよう
Chrome DevTools を使って JavaScript をカンタンにデバッグする方法を説明します。
目次
1. 背景
ぐらみんの ぐらみんこーど では JavaScript を使った子供向けのプログラミング講座を実施しています。
この中で複雑なプログラムへのデバッグ方法として Chrome DevTools を利用していますがその説明のためにこの記事を書きました。
2. 対象者
主にこの記事は以下の方に読まれることを想定しています。
- 小学 5年生以上
- ある程度 JavaScript の文法を理解している方
このため、JavaScript については文法説明などは行っていません。
3. プログラムのバグ
プログラムを書いていると思いがけない動きをしてしまうことってありませんか？
この思いがけない動きをバグと言います。この言葉はよく聞きますね。
人間なのでバグを出してしまうのは当たり前でバグはソフトウェアに必ずあると言われています。
4. デバッグってなんだろう？
デバッグはこの「バグを取る」こと、つまり「バグを直す」ことです。
このデバッグをするためのツールはたくさんのプログラミング言語や環境に用意されています。
デバッグには「ブレイクポイント」、「ステップ実行」のようにあまり聞いたことのないキーワードが登場しますが、どのツールでもこのキーワードや使い方はほとんど同じになっています。
5. JavaScript のデバッグツール
JavaScript でもデバッグツールはいくつかあります。
ただ、今回はとてもカンタンで Google Chrome に最初から付いてくる Chrome DevTools（クロームデブツール）を使ってみましょう。
6. デバッグツールを使うとこんなことができてしまいます
多くのデバッグツールはだいたい下のようなことができます。
- プログラムをストップする
- ストップしたまま変数に入っている値を見る
- プログラムを 1行（ステップと言います）ずつ実行する
プログラムが複雑になっている時などは 1行ずつ実行したり、変数の中身を見れるのはとても嬉しいことですね。
この他、Chrome DevTools だと JavaScript 特徴（とくちょう）を活かして使って下のこともできます。
- プログラムを Chrome DevTools 側から変える
- 自分のプログラムだけではなく世界中のサイトの JavaScript のプログラムを変えることができる
ブラウザで動く JavaScript パソコン（ブラウザ）にプログラムを一回ダウンロードして実行するため、こんなことができるのですね。
7. Chrome DevTools で JavaScript をデバッグしよう
それでは何はともあれ一回試してみましょう。
今回はデバッグに使う JavaScript のプログラムと HTML を用意しています。
最初にこのプログラムを動くように準備し、Chrome DevTools を使って JavaScript をデバッグしていきます。
8. デバッグに使う JavaScript と HTML ファイルを実行しよう
8-1. デバッグに使う JavaScript と HTML ファイルをダウンロードしよう
最初に下のファイルを自分のパソコンにダウンロードしておいて下さい。
デバッグに使う JavaScript プログラム デバッグに使う HTML ファイル
JavaScript プログラムも HTML ファイルもとてもカンタンな内容になっています。
説明はコードにコメントで書いています。
- JavaScript の場合のコメントの例:
// この行がコメントだよ - HTML の場合のコメントの例:
<!-- この部分がコメントだよ -->
JavaScript(index.js) の中身
function add(a, b) {
return a + b;
}
// プログラムの開始。
// index.html の「プログラムスタート」ボタンをクリックすると実行される
function start () {
// message 変数（へんすう）に 'hello' という文字列を代入（だいにゅう）する
const message = 'hello';
// message 変数の内容をターミナルに表示する
console.log(message);
// 1 と 3 をパラメーターとして付けて add 関数を実行する
// add 関数の結果は result 変数に代入する
const result = add(1, 3);
// result 変数の内容をターミナルに表示する
console.log(result);
}
HTML(index.html) の中身
<html>
<head>
<!-- index.js を使えるようにする -->
<script src="index.js"></script>
</head>
<body>
<!-- ボタンを表示し、クリックされた時（onclick）に start() 関数を実行する -->
<button type="button" onclick="start()">プログラムスタート</button>
</body>
</html>
8-2. Node.js がインストールされているか確認しよう
今回のデバッグでは browser-sync というツールを使う為に Node.js が入っていることを前提としています。
まだ、インストールしていない時は下の記事を参考にして下さい。
8-3. プログラムを実行しよう
JavaScript ファイルと HTML ファイルをダウンロードしたらこのプログラムを実行できるようにしましょう。
try-chromedevtool というフォルダを作り、index.js と index.html ファイルをそこに移動して下さい。
下のようになっていれば大丈夫です。
try-chromedevtool（フォルダ）
├─ index.html
└─ index.js
次にターミナル（Windows: コマンドプロンプト、Mac: ターミナル等） を開いて try-chromedevtool フォルダに移動します。
cd <try-chromedevtool を作ったフォルダ>
cd try-chromedevtool
そしてちょっと長いのですが次のコマンドを実行します。
npx browser-sync start --server --serveStatic . --files .
コマンドを実行して少し待つとブラウザが勝手に起動して上のようなページが表示されます。これで準備完了です。
9. Chrome DevTools を起動しよう
それでは Chrome DevTools を開いてみます。
9-1. Chrome DevTools を開いてみる
次に上の画面の □ の部分をクリックしてデベロッパーツールを開きます。これが Chrome DevTools です。
Chrome DevTools を開くとこんな画面が出ます。
9-2. Chrome DevTools を日本語にする
Chrome DevTools を 日本語化します。英語のままで問題ないのであればこの手順を行う必要はありません。
Chrome DevTools が英語なら上の Always match Chrome's language をクリックして日本語にしましょう。また、下の部分のウィンドウは × をクリックして消してしまってもいいかもしれません。
日本語にして、下のウィンドウを消すとこういう画面になりました。今はコンソールタブが開いています。
9-3. Chrome DevTools のコンソールタブを使ってみる
いったんここでコンソールタブを使ってみましょう。
試しにこのコンソールタブに console.log('hello'); と入力して Enter キーを押してみると、プログラムの結果として次の行に 'hello' という文字が表示されました。
今度は alert('hello'); と入力して Enter キーを押してみましょう。
アラートダイアログが表示されました。OK を押してこのダイアログを閉じましょう。この他、コンソールには JavaScript の中に書いた console.log() も出力されます。
9-4. ソースを開いてみる
今度はソースタブを使って JavaScript や HTML ファイルを見てみましょう。
まずはソースタブをクリックしましょう。
ソースタブをクリックするとこんな画面が出てきます。
マウスでウィンドウ枠（わく）を引っ張って見やすくしましょう。
9-5. ソースタブの構成
ここでソースタブの構成を見てみましょう。
A の部分はページペインと呼びます。ここで JavaScript のソースファイルを選びます。
B の部分はエディターペインと呼びます。ここで JavaScript のソースファイルを表示したり変更したりします。
C の部分でデバッグを行います。ここでプログラムを止めたり再開したりします。
10. Chrome DevTools でプログラムを止めてみよう
それではデバッグをやってみます。
デバッグをするためにはまずブレークポイントというポイントをソースの好きな行に設定します。
このブレークポイントを設定するとプログラムがその行で止まります。
それでは上の画面の □ の部分をクリックしてブレークポイントを設定しましょう。
クリックした行のところが青くなり（A の部分）、B の部分にもクリックしたファイルとその行が表示されましたね。
今度は HTML で作った プログラムスタート ボタンをクリックしましょう。このボタンにはクリックされた時のイベント（onclick）に start() 関数（かんすう）を登録しているため、start() 関数が実行されます。
こんな画面になりましたね。start() 関数の中のブレークポイントを設定した行でプログラムが止まっています。今の行が水色になりました。
今度はマウスを message 変数の上に持っていってみましょう。
hello と表示されました。これは 10行目で message 変数に hello という文字列を代入（だいにゅう）していたからその値が入っていたのですね。
右のデバッグを行うペインでもその時の変数の値が表示されています。message もありますね。
今度は関数の中にもブレークポイントを貼ってみます。□ をクリックしてここにもブレークポイントを貼りましょう。
3行目あたりにもブレークポイントが設定されました。
そのまま、20行目もクリックしてブレークポイントを貼りましょう。
それでは □ をクリックしてデバッグを再開しましょう。
再開してすぐに次のブレークポイントである 3行目で止まりました。関数の中でもデバッグでプログラムを止めることができます。
もう一度再開しましょう。
今度は 20行目で止まりましたね。
result 変数の値も見てみましょう。add() 関数により 1 と 3 が足されて 4 になっていますね。
そのまま再開して終了しましょう。
11. デバッグの途中で変数の値を変えてみよう
今度はデバッグの途中で変数の値を変えてみます。
まずはいくつかのブレークポイントを OFF にします。□ をクリックして 13行目以外のブレークポイントを OFF にしてください。
次に □ の部分の 3 を 4 に変えてみましょう。プログラムはプログラム実行前であればエディターペインを使って自由に変えることができます。変更できない時は一回このページを再読込してみましょう。ブレークポイントは消えません
4 に変わったら Ctrl + s キーを押して保存しましょう。
それではスタートです。プログラムスタート をクリックして下さい
ブレークポイントで止まりました。今度はステップ実行を使ってみます。
ステップ実行というのはプログラムを 1行ずつ進めることになります。
□ をクリックしてみましょう。13行目が実行されて次の行に進むはずです。
1行だけ進んで 17行目で止まりましたね。
もういちどステップ実行します。ステップ実行は関数の中に入って最初の 1行目で止まります。
add() 関数の最初の行の 3行目で止まりましたね。また、B のところも見て下さい。2つ目の引数の b がデバッグの時に変えた 4になっていますね。
ちなみに 3行目で止まっているように見えますが実際はまだ 3行目自体は実行されていません。もう一度 □ をクリックしてステップ実行しましょう。
関数が終わって 20行目で止まりましたね。result の値も 5 に変わりました。
それでは最後に □ をクリックしてプログラムの実行を再開しましょう。これでまたプログラムが動く状態に戻ります。