VSCodeでvue.jsのプログラムがデバッグできない

事象

VSCodeでvue.jsを開発しようとしたが、デバッグができない。
実行前は、以下のようにブレークポイントが設定できる。

実行すると以下のようにブレークポイントが設定できない。そしてとまらない。

調査

以下手順で起動した

以下のように「実行とデバッグ」-「Webアプリ(Edge)」（chromeの場合は「Webアプリ(Chrome)」）を選択し、launch.jsonファイルを作成。

この状態だと、実行してもブラウザは起動するが、ブレークポイントがグレーになる。

試したこと

色々調べると、VSCode上の設定で「debug:javascript.usePreview」の設定をオフにしたり、
「Allow Breakpoints Everywhere」のチェックが外れているからONにしたり↓

等があったが、「debug:javascript.usePreview」という設定項目はないし、「Allow Breakpoints Everywhere」の設定をONにしても変わらず、自分の使っているVSCodeのバージョン（1.77.3）で発生する事象とはどれも異なるみたい。

解消方法（Chromeの場合）

以下手順で、VSCode上でデバッグができるようになった。

• launch.jsonにsourceMapsの設定を有効にする。
  launch.json

  {
      // IntelliSense を使用して利用可能な属性を学べます。
      // 既存の属性の説明をホバーして表示します。
      // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
          {
              "type": "chrome",
              "request": "launch",
              "name": "localhost に対して Chrome を起動する",
              "url": "http://localhost:8080",
              "webRoot": "${workspaceFolder}",
              "sourceMaps": true
          }
      ]
  }
  

• vue.jsのアプリケーションを起動
  npm run serve
• VSCode上で実行する。
  
• VSCode上にブレークポイントを設定する。　※chromeの開発者ツール上で設定してもよい。
• 該当箇所に来ると、VSCode上のブレークポイントの箇所が来るとVSCode上でデバッグされる。同時に裏でchromeの開発者ツールでもデバッグができる。
  

解消方法（Edgeの場合）

Chromeと同じ手順でデバッグできた。
launch.jsonの設定はこんな感じです。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "localhost に対して Edge を起動する",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        }
    ]
}

参考サイト

https://qiita.com/westhouse_k/items/da4ae3eea8eaacb646ce
https://qiita.com/peisan/items/a33fd4073a020d4d0dfe
https://github.com/microsoft/vscode/issues/102493
https://www.tasc.co.jp/work/vue-js-vscode-%e3%81%a7%e3%83%87%e3%83%90%e3%83%83%e3%82%b0%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%84%e6%99%82%e3%81%ae%e8%a7%a3%e6%b1%ba%e7%ad%96

最後に

AWSでの開発や、プログラミングの便利情報など「とやまTechカフェ」というブログで紹介しています。
よろしければこちらもぜひご覧ください。