起動中のChromeと連携してデバッグをする

設定する項目は「新規にChromeを起動してデバッグをする」とほぼ同じ内容ですが、リモートデバッギングポートのポート番号を指定する必要があります。sourceMapdiagnosticLoggingruntimeExecutableなどの設定は指定がなければ省略は可能です。

{
  "version": "0.1.0",
  // 起動中のChromeと連携してデバッグ
  "configurations": [
  {
    // デバッグ設定の名称
    "name": "Attach",
    // デバッグ種別を指定(chrome/node/monoなど)
    "type": "chrome",
    // lanunchまたはattachを指定
    "request": "attach",
    // マッピングするローカルファイルが配置されているディレクトリを指定
    "webRoot": "${workspaceRoot}/",
    // リモートデバッギングポートのポート番号を指定(デフォルト値の9222を指定)
    "port": 9222,
    // ソースマップの有効・無効の指定(true/false)
    "sourceMaps": true,
    // コンソールにログを出力するかの指定(true/false)
    "diagnosticLogging": true,
    // デバッグに使用するブラウザ(異なるディレクトリに設置したChromeを使用したいときなどに指定)
    "runtimeExecutable": null
  }
]
}

起動しているChromeと連携するには、Chromeのリモートデバッグを有効にしておく必要があります。実行するOSにより、以下の手順でリモートデバッグを有効にしてChromeを起動します。

  • Windowsの場合
    Chromeのショートカットを右クリックし、コンテキストメニューより[プロパティ]を選択します。ダイアログのリンク先欄に--remote-debugging-port=9222の起動オプションを付加して、Chromeを起動します。

    <path to chrome>/chrome.exe --remote-debugging-port=9222
  • macOSの場合
    ターミナル.appより下記のコマンドを実行し、Chromeを起動します。

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

Chromeが起動したら、デバッグを行いたいWebページに遷移し、デバッグパネルより再生ボタンもしくはF5キーを押すことで、デバッグを実行することができます。

うまく動かない場合は・・・

  • [webkit-debug-adapter] Path must be a string. Received undefinedと表示れた場合は、設定ファイルに記載しているファイルパスを確認してみてください。
  • [debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222と表示された場合は、Chromeを一旦終了し、再起動すると解決することがあります。
  • Chrome側でDeveloperツールを起動すると「Visual Studio Code」との接続が切断されてしまいます。この問題は近いうちに修正されるとのことですが、現在では対応していないため、デバッグ中はDeveloperツールは開かないようにしましょう。
  • 他のタブで同一のファイルを開いていた場合、一番始めのタブで開いたWebページに接続されます。不要なタブは閉じておくようにしましょう。

おわりに

ソースマップにも対応しているため、圧縮されたJavaScriptファイルやTypeScriptのコードもそのままデバッグすることができます。エディター上でデバッグができるため、デバッグ効率もあがり開発効率も格段にアップします。

MicrosoftはChromeに続いてMicrosoft EdgeなどのWebブラウザをサポートすることも検討しているようです。「Visual Studio Code」はその他にもGitとの連携やTaskRunnerとの連携など多彩な機能を備えています。まだ使用したことのない方はぜひお試しください。