“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

If you are using code splitting via webpack, your breakpoint won't be "verified" until Chrome loads that module (i.e. typically when you navigate to that part of your application)

Answer 2

For me my breakpoints were turned off:

Answer 3

I had to delete my .vscode folder and regenerate it . and also folder was pointing to wrong path i had to change it back to my current project folder path. Thank you

Answer 4

I came here while using flutter and dart. I don't know but deleting launch.json in .vscode folder solved my issue

Answer 5

My problem was that the source mapping was not configured properly. Be sure that your actual TS sources is visible on the Sources tab within Chrome debug extensions and try to place your breakpoints there firstly. Maybe it will help someone.

Answer 6

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.