開発覚書はてな版

個人的な開発関連の備忘録

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

概要

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

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

marketplace.visualstudio.com

動作環境

サンプルソース

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"
            ]
        }
    ]
}