“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,

Answer 1

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}/*"
    }
  }]
}