【Chrome Developer Tools】JavaScriptにブレークポイントを張ってデバッグをする方法

便利なJavaScriptですが、「ブレークポイントを張ってデバッグしたいなぁ」と感じることってありませんか？
実は、Chrome標準のDeveloper Toolsを使えば、JavaScriptもブレークポイントを張って、デバッグ実行することが出来るんです:astonished:
早速使ってみましょう。

# この記事で学ぶこと
- JavaScriptにブレークポイントを張る方法
- ブレークポイントからJavaScriptを１行ずつ実行する方法

# 検証用プログラム

```HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title></title>
  <script type="text/javascript">
    function button2Push() {
      if (document.getElementById("vesi1").checked) {
        console.log("なす");
      }
      if (document.getElementById("vesi2").checked) {
        console.log("ピーマン");
      }
      if (document.getElementById("vesi3").checked) {
        console.log("かぼちゃ");
      }
      if (document.getElementById("vesi4").checked) {
        console.log("えだまめ");
      }
      console.log("-----------------------");
    };
  </script>
</head>
<body style="margin: 30px;">

  <p style="font-size: 120%;margin: 0px;"><b>お題２</b></p>
  <p>すきな野菜を選んでください。</p>

  <form name="test2">
    <input type="radio" id="vesi1" />なす
    <br />
    <input type="radio" id="vesi2" />ピーマン
    <br />
    <input type="radio" id="vesi3" />かぼちゃ
    <br />
    <input type="radio" id="vesi4" />えだまめ
    <br />
    
    ------------------------------------------------
    <br />
    <input type="button" id="button2" name="button2" value="押してみる。" onclick="button2Push();">
  </form>

</body>
</html>
```

## 画面イメージ
![001_100_b.png](https://qiita-image-store.s3.amazonaws.com/0/188980/aeaf380b-698b-b020-3c3c-07565c87d7e1.png)

## 動作イメージ
好きな野菜のラジオをボタンを選んで、「押してみる。」ボタンを押下すると、consoleログに選んだ野菜の名前が出力されます。
consoleログの確認方法はこちらの記事を参照:arrow_down:
[【Chrome Developer Tools】実例で学ぶconsoleタブで出来ること～JavaScriptデバッグ編](https://qiita.com/mtanabe/items/49a116354c2ad9603942)

# １．ファイルを表示する
F12を起動してDeveloper Toolsを起動したら、Sorceタブを開きます。
そして、ブレークさせたいJavaScriptが書かれているファイルを表示します。
![003_080.png](https://qiita-image-store.s3.amazonaws.com/0/188980/834515ce-8737-0d56-f087-8ba174c335ec.png)
上の図で赤線を引っ張った個所がソースファイルなので、ダブルクリックします。
もしも表示されていないときは、緑の丸で示したアイコンをクリックしてください。
非表示モードになっているかもしれません。

# ２．ブレークポイントを張る
ソースを表示させたら、ブレークさせたい行の行番号をクリックします。
すると、行番号に青いラベルが点灯します:large_blue_circle:
![002_075.png](https://qiita-image-store.s3.amazonaws.com/0/188980/e6de9610-a489-8558-9648-dd0e028b732d.png)
ポイントは<font color="#FF0099">「必ず止まる場所でブレークを張ること」</font>です。
止まりそうな場所がわからなければ、ブレークのためだけに、一時的に```console.log()```を仕込むのもアリです。

# ３．JavaScriptを実行する
今回の検証ソースだと、「押してみる。」ボタンを押下することになります。
正しくブレークされると、ブラウザの画面一面にグレーのフィルタがかかります。
![005_060.png](https://qiita-image-store.s3.amazonaws.com/0/188980/8d739463-e321-26fa-24c3-545f3cf21464.png)

## 1)と3)→実行ボタン
青矢印がブレークポイントだけを追いかけるボタンで、黒の曲がった矢印が１行ごとのステップ実行ボタンです。
青い矢印はF8で、黒の矢印はF10キーでも、それぞれ実行可能です。

## 2)→ブレーク箇所
止まったブレークポイントの行は青くハイライトされます。
ちなみに、この状態で変数にカーソルを当てると、以下の図のように変数の詳細がポップアップされます。
![006_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/9abcd742-5785-1e78-23b9-a813d3ba36cf.png)

そして、`document.getElementById("vesi1")`など、メソッドの切れ目まで含めてドラッグすると、このように:arrow_down:メソッドの中身単位でポップアップされます。
![007_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/868587bd-1401-2b8a-4693-1f92e02035ca.png)

これ、かなり便利なので覚えておくとデバッグ効率が上がります:triangular_flag_on_post:

# まとめ
- JavaScriptにブレークポイントを張るには、まずDeveloper ToolsのSorceタブを開く。
- ステップ実行はF10もしくは黒い曲がった矢印。
- ブレークポイントごとの実行はF8もしくは青い矢印。
- ブレークポイントは「必ず止まるところ」で張る。なければ`console.col()`でよいから作ること。
- 変数名にカーソルを当てると内容がわかって便利。