Vue.js の TypeScript のコードを VS Code でデバックする方法

Question

お世話になっております。
タイトルのように Vue.js を TypeScript で書こうと思っているのですが、VS Code を使ったデバックができません。

TypeScript のコードにブレークポイントを設定し、VS Code のデバック機能で Chrome を立ち上げデバックしようとしても VS Code のブレイクポイントが
「Breakpoint set but not yet bound」
となっており、Chrome 上でコードを実行してもブレークポイントにヒットしません。

launch.json の sourceMapPathOverrides がおかしいのかとも思いましたが正直なところ何を設定すればよいのかわかりませんでした。

ご存じの方がいらっしゃればどうぞよろしくお願いいたします。

環境

• OS : Windows 10 Pro
• node : v11.11.0
• npm : 6.7.0
• vue : 3.12.1
• Visual Studio Code : 1.41.1

launch.json

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

vue.config.js

module.exports = {
    productionSourceMap: false,
    configureWebpack: {
        devtool: 'source-map'
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

Debugging in VS Code does not work for Typescript Vue app
私もブレークポイントが「Unbound breakpoint」というメッセージでヒットしない事象が発生し、
上のリンクのコメント欄を参考にlaunch.jsonを以下のように変更したところヒットするようになりました。
(sourceMapPathOverridesのsrcの前に./を追加)
ご参考までに。

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