Vue.js3がVSCodeでデバッグができない

Question

実現したいこと

Vue.js3で実装したソースコードをVSCodeでデバッグしたい

発生している問題・分からないこと

デバッグが有効にならずステップインといったボタンなどもグレーアウトされている

ステップインがグレーアウト

該当のソースコード

{
    // 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
        }
    ]
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

以下のQiitaの記事によるとlaunch.jsonにsourceMapsを追加すると記載があり試してみたが変化がなかった。
https://qiita.com/Z-A-K-I/items/7fe0ace4c8d1b8e262bf

補足

特になし

Answer 1

こんにちは。以下の通りを試してみてください：

1. launch.jsonを開き、Vue.js用に設定を追加。
2. type: "chrome"とrequest: "launch"を設定。
3. 必要に応じて、webRootにsrcのパスを指定。

これでたぶんできます。