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

Another update for @angular/cli 9.1.7 28/05/2020...

This is now my working configuration for @angular/cli 9.1.7. Removing the sourceMapPathOverrides

    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:21460",
    "webRoot": "${workspaceFolder}"
  }]
}

My solution to the "Unverified breakpoint" issue.

Environment

• Angular CLI 8.1.1
• Visual Studio Code 1.36.1
• Debugger for Chrome extension 4.11.6

The default .vscode/launch.json created in VSC via the "Add configuration" option will look similar to this (I have changed port from 8080 to 4200).

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}"
  }]
}

Adding item below resolves my issue with "Unverified breakpoint".

"sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }

Complete and working .vscode/launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

There are some additional items that can be added:

 "breakOnLoad": true,
 "sourceMaps": true,

However, I didn't need these in my case to resolve the problem.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "breakOnLoad": true,
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "*": "${webRoot}/*"
    }
  }]
}

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:\Users\myusername\Documents\VSCode\Source\ProjectName

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:\Users\myusername\Documents\VSCode\Source\ProjectName and setup my launch.json in that directory.

The above answer is probably going to solve a lot of problems but it didn't solve mine. Mine was a much simpler and more annoying problem...

The configuration settings in the launch.json file are case sensitive.

My "webRoot" entry was correctly spelled but I had a capital B in one of the words instead of a lower case b.

For example:

"webRoot": "${workspaceFolder}/My.Folder"

will not match a folder in your workspace with the name:

My.folder

I hope this helps someone out there.