VSCodeでVue.jsアプリをデバッグする

TypeScript+Vue.jsで開発していると、TypeScriptのコードにbreakpointを貼りたくなる。 VSCodeを使うとそれが出来るようになる。。すごい！

jp.vuejs.org

基本上記サイトの手順の通りやればいいけど、うまくいかなかった点は以下。

launch.jsonの内容は上記サイトに記載されているものをそのまま使ってもうまくいかなかった。具体的には、breakpointを貼っても赤丸にならず、「未確認のブレークポイント」というメッセージが表示される。 launch.jsonが生成されたら、以下のようにurlだけを修正して使うとうまくいった。このへんはビルドの設定によるんだろうけど・・参考まで。

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: 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/test/#/testpage",
      "webRoot": "${workspaceFolder}"
    }
  ]
}