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

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

{
  "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)
      "trace": true
    }
  ]
}

起動している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を一旦終了し、再起動すると解決することがあります。
  • 他のタブで同一のファイルを開いていた場合、一番始めのタブで開いたWebページに接続されます。不要なタブは閉じておくようにしましょう。

おわりに

MicrosoftはChromeだけでなくMicrosoft Edgeでも同様のデバッグができる「Debugger for Edge」もリリースしています。ソースマップにも対応しているため、圧縮されたJavaScriptファイルやTypeScriptのコードもそのままデバッグすることができます。エディター上でデバッグができるため、デバッグ効率もあがり開発効率も格段にアップします。

その他にもGitとの連携やTaskRunnerとの連携など多彩な機能を備えています。まだ「Visual Studio Code」を使用したことのない方はぜひお試しください。

また、Google Chromeのデベロッパーツールでも同様のデバッグを行うことができます。詳しくは「ChromeのデベロッパーツールでJSをデバッグする方法(入門編)」をご参照ください。

※本記事は、2018年6月時点最新のVisual Studio Code 1.24.0、Debugger for Chrome 4.6.0、Chrome 67で動作確認を行っています。