VSCodeでvuejsをデバッグ実行するときのメモ

概要

• VSCodeでVuejsをデバッグ実行したかった（VSCode内でブレークポイントとか）が、うまく行かなかった

結論

• VSCodeのlaunch.jsonの設定がフォルダ構成にあってなかった
• sourceMapPathOverridesのファイルの紐付けに*がついてなかった

参考

v3.vuejs.org

teratail.com

サンプル

サンプルのディレクトリ構成(Dockerでサーバとか構築していたので、srcまでの階層が深い）

.
├── server
│   └── data
└── src
    ├── node_modules
    ├── dist
    ├── public
    └── src            ここにts,jsなどのソースファイル

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src/src",
            "sourceMapPathOverrides": {
              "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

色々とググりましたが、sourceMapPathOverridesとwebRootこれがどうやら重要ぽい

sourceMapPathOverrides

webpackのsource-mapとどのファイルを関連付けるかを指定する

webpack

このように、source-map上は、今回の場合

webpack:///./src/*

に入っているので、それを指定

最終的に、このように。

            "sourceMapPathOverrides": {
              "webpack:///./src/*": "${webRoot}/*"
            }

"${webRoot}/*"の*を消してしまってかなりはまってしまった。

webRoot

これは、VSCode上プロジェクトのどこにソースファイルがあるかを紐付ける内容
今回は./src/srcにソースファイルが入っているので、このように指定

            "webRoot": "${workspaceFolder}/src/src",

結果

VSCode上でブレークポイントでとまるようになった