“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:\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.

Answer 2

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