typescript - “Unverified breakpoint” in Visual Studio Code with Chrome Debugger extension

Question

I am trying to debug my Typescript code in Visual Studio Code, using the Chrome Debugger extension, but I am getting the "Unverified breakpoint" message on my breakpoint, and execution does not stop on my breakpoint.

Here is my launch.json file:

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

App Version:

• Visual Studio Code: 1.25.1
• Chrome: 67.0.3396.99

Any other suggestions on how I can solve this issue?

Answer 1

I finally found out whats wrong:

When I read the definition of '${workspaceFolder}', it states the following:

the path of the folder opened in VS Code

My mistake:

My path in Windows to my project was as follow: C:UsersmyusernameDocumentsVSCodeSourceProjectName

Through Visual Studio Code, I had the Source folder open, and always needed to do a change directory (cd ProjectName) command in Integrated Terminal to 'ProjectName'. This lead to the .vscode folder and launch.json file being created in the Source folder, and not the ProjectName folder.

The above mistake lead to the fact that the ${workspaceFolder} was pointing to the Source folder, where no Angular components was, instead of pointing to the ProjectName folder.

The Fix:

In Visual Studio Code, open folder: C:UsersmyusernameDocumentsVSCodeSourceProjectName and setup my launch.json in that directory.