[解決済み] Chrome Debugger拡張機能によるVisual Studio Codeでの "Unverified breakpoint "について

質問

Visual Studio Code で Chrome Debugger 拡張機能を使用して Typescript コードをデバッグしようとしていますが、ブレークポイントに "Unverified breakpoint" というメッセージが表示され、ブレークポイント上で実行が停止しません。

以下は、私の launch.json ファイルです。

{
    linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceFolder}"
        }
    ]
}

アプリのバージョン

• Visual Studio コード。1.25.1
• Chrome: 67.0.3396.99

この問題を解決する方法について、他に何か提案はありますか？

どのように解決するのですか？

何が問題なのかがやっとわかりました。

workspaceFolder}'の定義を読むと、以下のように記載されています。

VS Codeで開いているフォルダのパス

私のミスです。

私のプロジェクトへのWindowsのパスは次のとおりでした。 C:\Users\myusername\Documents\VSCode\Source\ProjectName

Visual Studio Code を通して、私は Source フォルダーを開き、常にディレクトリの変更 (cd ProjectName) コマンドを実行する必要がありました。 Integrated Terminal を'ProjectName'に変更する必要がありました。 このため .vscode folder and launch.json file の中に作成されます。 Source フォルダーに作成され ProjectName フォルダーではありません。

上記のミスにより ${workspaceFolder} を指していたのが Source フォルダを指していましたが、Angular コンポーネントのない ProjectName フォルダを指すのではなく、Angularコンポーネントのない

修正方法です。

Visual Studio Codeで、フォルダを開きます。 C:\Users\myusername\Documents\VSCode\Source\ProjectName を開き、私の launch.json をそのディレクトリに設置します。