VS Codeでデバッグするとブレークポイントが「バインドされていないブレークポイント」となり機能しない

前提

Visual Studio Code（VS Code）のデバッグ機能を使用し、
作成したjs、vueのファイルのテストをchromeのブラウザで行いたいが、
ブレークポイントが「バインドされていないブレークポイント」（Unbound Breakpoint）となりデバッグができない。

実現したいこと

• VS Codeでブレークポイントを使用してデバッグを行うこと

発生している問題・エラーメッセージ

デバッグ実行まではブレークポイントを置くことができる。（赤丸部分）

デバッグ実行すると、画像のように白抜きの丸に表示が変わり、
カーソルを当てると「バインドされていないブレークポイント」と表示される。
（ブレークポイントの一部、と記載されているが、この箇所以外も全て同様の状態になる。）

この時、ブレークポイントは機能しないがchromeは問題なく起動し操作も可能。

該当のソースコード

デバッグのために作成したlaunch.jsonファイルは以下の通り。

json

1{2 // IntelliSense を使用して利用可能な属性を学べます。3 // 既存の属性の説明をホバーして表示します。4 // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=8303875 "version": "0.2.0",6 "configurations": [7 {8 "type": "chrome",9 "request": "launch",10 "name": "localhost に対して Chrome を起動する",11 "url": "http://localhost:8000",12 "webRoot": "${workspaceFolder}",13 "trace": true,14 "sourceMaps": true,15 "sourceMapPathOverrides": {16 "webpack:///./*": "${webRoot}/src/*"17 }18 }19 ]20}

"trace": trueとして出力されたファイルを確認すると以下のエラーが記載されていた。

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 2 column 1 of the JSON data

試したこと

• sourceMapPathOverridesの設定見直し（パスを直書きにしても状況変わらず）

補足情報（FW/ツールのバージョンなど）

• Visual Studio Code　バージョン: 1.74.3

ブレークポイントが白抜きになると同時に表示されている、「〜起動構築のトラブルシューティング」については知識がなく特に何も作業できていません。
対応方法をご存知の方がいらっしゃいましたらご教授いただけると幸いです。
よろしくお願いいたします。