【VSCode】Chromeデバッグ起動設定

概要

Visual Studio Code から Chrome デバッグ接続が可能です。
Debugguer for Chrome拡張機能を利用することでデバッグできます。
ただし、デバッグ前にChromeの起動引数に--remote-debugging-port=9222の設定が必要です。

このあたりの設定やまわりへの周知が面倒なため、launch.jsonの値を変更して配布しています。
launch.jsonにruntimeArgsという項目を追加して、--remote-debugging-port=9222を設定することでデバッグ起動時に接続が簡単に出来ます。

marketplace.visualstudio.com

動作環境

• Visual Studio Code 1.20
  • 拡張機能：Debugger for Chrome

サンプルソース

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ]
        }
    ]
}

OS別Chrome起動設定

Windows

基本的には上記のlaunch.jsonで起動すればデバッグは可能です。
また、以下のようにコマンドライン引数に --remote-debugging-port=9222 を設定することでデバッグが可能になります。

macOS

Google Chromeのプロセスを全て切ったあと以下のコマンドを入力して起動します。
Automatorを使用してショートカットを作成しておくと便利です。

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

起動中のChromeにデバッガをアタッチする

デバッグ可能な状態のChromeに対してアタッチしたい場合は以下のlaunch.jsonの設定することで対応可能です。

launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "webRoot": "${workspaceFolder}"
      }
    ]
}