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

2020年5月9日

この記事の要約

「Debugger for Chrome」をインストールして、Visual Studio Codeの「実行」パネルからデバッグを開始すると、ローカルファイルと連動してJavaScriptのデバッグができる
設定内容は.vscode/launch.jsonに記述する必要があるが、実行パネル内にある「launch.json ファイルを作成します」をクリックすればひな形は作成してくれる

Visual Studio Codeの拡張機能である「Debugger for Chrome」を使うと、Google Chromeで開いているローカルファイルとVisual Studio Codeを連携させてJavaScriptのデバッグが行えます。

marketplace.visualstudio.com

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 ファイルを作成します」をクリックします。

すると、.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が起動してデバッグを開始できます。