【VSCode】Chromeデバッグ起動設定
概要
Visual Studio Code
から Chrome
デバッグ接続が可能です。
Debugguer for Chrome
拡張機能を利用することでデバッグできます。
ただし、デバッグ前にChrome
の起動引数に--remote-debugging-port=9222
の設定が必要です。
このあたりの設定やまわりへの周知が面倒なため、launch.json
の値を変更して配布しています。
launch.json
にruntimeArgs
という項目を追加して、--remote-debugging-port=9222
を設定することでデバッグ起動時に接続が簡単に出来ます。
動作環境
- Visual Studio Code 1.20
サンプルソース
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}" } ] }