# Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う

URL: https://webrandum.net/vscode-debugger-for-chrome/
公開日: 2020-05-09
更新日: 2020-05-09
カテゴリー: コーディング
タグ: Google Chrome, Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

- 「[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)」をインストールして、Visual Studio Codeの「実行」パネルからデバッグを開始すると、ローカルファイルと連動してJavaScriptのデバッグができる

- 設定内容は`.vscode/launch.json`に記述する必要があるが、実行パネル内にある「launch.json ファイルを作成します」をクリックすればひな形は作成してくれる

Visual Studio Codeの拡張機能である「[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)」を使うと、Google Chromeで開いているローカルファイルとVisual Studio Codeを連携させてJavaScriptのデバッグが行えます。

[Debugger for Chrome - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

具体的にできることは下記の通り。

- 変数の確認

- Visual Studio Code上でブレークポイントを設定してコールスタックを確認

- ウォッチ式の確認

- コールスタックの確認

特にJavaScriptのコード量やファイル数が増えてくると、Chrome開発機能側でブレークポイントを設定するのは面倒だったりするので、Visual Studio Code側でデバッグできるのはありがたかったりします。

逆にそこまでコード量やファイル数のないものであれば、Chrome開発機能で十分です。

## 初期設定

サイドバーの「実行」パネルを開くとデバッグに関する内容が表示されますが、最初はなにも設定していないのでサイドバー内にある「launch.json ファイルを作成します」をクリックします。

![サイドバーの実行パネル](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_1-8.png)

すると、`.vscode/launch.json`に下記の設定ファイルのひな形が作成されます。

```
{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

もしlocalhostなどを設定しているのであれば、`"url"`の部分だけ合っているか確認して変更するだけで構いませんが、ローカルファイルを参照したい場合は下記の記述に変更します。

```
{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch local file",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceRoot}/index.html"
    },
  ]
}
```

`"file"`の部分はそのとき表示させたいhtmlファイルのパスに変更すればOKです。

あとはメニューの［実行］→［デバッグ開始（F5）］を選択するか、実行パネルの左上の「Launch local file」の緑色の三角をクリックすると、Google Chromeが起動してデバッグを開始できます。

![デバッグの開始](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_2-6.png)

デバッグ時の停止・リロード・終了などの操作は画面上に表示されるコントローラから行います。

![デバッグのコントロール](https://webrandum.net/mskz/wp-content/uploads/2020/05/image_3-4.png)

## Google Chrome以外のブラウザ

Google Chrome以外のブラウザの拡張機能もあるので、他ブラウザで使いたい場合はそれぞれのブラウザ用の拡張機能をインストールしましょう。

- Firefox：[Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug)

- Microsoft Edge：[Debugger for Microsoft Edge](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge)