VSCodeでlaunch.jsonのディレクトリを変更してvue-cliをデバッグする

はじめに

SPAのフロント開発では、webpackによって変換されたjsが書き出されるため、
通常のchromeを使ったデバッグでは分かりづらい場面が多々あります。

Visual Studio Code(以下、VSCode)では、Chromeと連携をして、jsのコードをデバッグする機能があるため、これを活用することで、開発時のソースコードのまま、ブレークポイントの設定や、変数の参照が可能となります。

設定方法はこちらに記載してありますが、この記事では、lanuch.jsonで指定するディレクトリを変更する方法を記載します。

ディレクトリの変更

webRootの値が、vue-cliのsrcフォルダの位置になります。
vue-cliが/プロジェクトルート/htmlフォルダにインストールされている場合、設定ファイルの値を下記に置き替えてください。

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/html/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

参考

https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html
https://github.com/Microsoft/VSCode-chrome-debug