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

typescript debugging visual-studio-code vscode-settings

71,996

Solution 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.

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

Solution 3

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.

Solution 4

There are many correct answers given. In my case a combination of all those answers helped, and it took me a long time to figure it out. I hope I can save you some headache time with this, so

let me summarize it step by step with reference to the answers above what helped me:

It is important to start VS code from the right folder (see answers from CodeChimp and monstertjie_za).
Open a console window and cd to the project folder.
Example:
cd myProject
code .
Make sure you're configuring the files in the right .vscode folder.
The right .vscode folder is a subdirectory of your project folder.
Note: if you have already mistakenly opened VS code in a subfolder level too deep, e.g. in the src folder, then you will find a .vscode folder there (as it was in my case), containing configuration files which are useless for debugging.
Set up a debug configuration in the .vscode\launch.json file.
Make sure that you have specified the right port for your application, in my case port 4200 was doing fine.
Also make sure that the "webRoot" parameter is configured correctly (see answer from Stig Perez). In my case it was necessary to add a subfolder to it. To find that out what the path specified by the variable $(workspaceFolder) is, check out the question I've asked at StackOverflow regarding how to display VS code variable values.
Note: If there is no such configuration yet, do the following to add it: Go to the debug extension (i.e. click on the side bar). In the dropdown of your debugger, select “Add Configuration...”, then press the blue “Add Configuration” button. Select “Launch Chrome” as configuration to be added.
Example configuration (launch.json):
```
"configurations": [
        {
                "type": "chrome",
                "request": "launch",
                "name": "Launch Chrome",
                "url": "http://localhost:4200",
                "webRoot": "${workspaceFolder}/projectsubfolder"
        }]
```
Replace projectsubfolder by the subfolder you might have in your project. Note that this is case-sensitive (see answer from Michael Walsh).
Now set the breakpoints in your application.
To launch your application with debugger, open a terminal window inside VS code, type
cd projectsubfolder
npm install & ng serve
This ensures the dependent packages are resolved and downloaded before your application is being compiled. Wait until the compilation is finished.
Then, click on the green triangle in the VS debugger which will launch a Chrome window with attached debugger.
Note: You don't need to run npm install every time, just when packages/dependencies have changed. Most of the time, it is sufficient to execute ng serve to re-compile and run your code.

Solution 5

In my case I had to define the sourceMapPathOverrides value like this:

File launch.json (contained in .vscode folder):

{
  // 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:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "smartStep": true,
      "internalConsoleOptions": "openOnSessionStart",
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/project/app/*"
      }
    }
  ]
}

My source is in ${workspaceFolder}/project/app.

View more solutions

71,996

monstertjie_za

Updated on July 05, 2022

Comments

monstertjie_za almost 2 years
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?
P.K. over 5 years

Im reading this and I dont understand what is the solution;).... How to set ${workspaceFolder}?
INF.TA over 5 years

In simpler terms, in Visual Studio Code, open the folder that contains package.json.
Matt over 5 years

How do you read the definition of the ${workspaceFolder} ? (In other words, how to verify the value of that variable in VS Code?)
Matt over 5 years

I raised it as a separate question, and got the answer. In case someone needs this information as well.
Jake OPJ about 5 years

Mine was even simpler: I had an extra slash after "workspaceFolder" "webRoot": "${workspaceFolder/}"
Jason Woods about 5 years

For folks who get here via search, and this isn't the answer. You will also get Unverified Breakpoint if the file you're trying to debug has changes that aren't saved.
Jeppe about 5 years

Thanks! I used "webRoot": "${workspaceFolder}/ClientApp" in a project created with dotnet new angular.
Shamshiel almost 5 years

This worked for me if I start the Chrome debugging session for the first time but if I change the breakpoints they are not hit.
tag almost 5 years

this work for me, thank you: { "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src", }
AbhishekS over 4 years

adding webpack attribute should work but i had to find path by running command: .scripts in Debug Console of VSCODE while app is launched/running
IRCraziestTaxi over 4 years

THANK YOU! I have never had this problem before but all of a sudden I found myself unable to debug a newly generated Angular 8 project. This fixed it.
Yao Li over 4 years

It's true for my case as well. I set breakpoints in files called after index.js which is my entry js file and they never get hit. But I set breakpoints at functions in index.js first and it definitely stops there, then I set breakpoints for other files, they stop as well and seems like activated after index.js.
Tom over 4 years

as long as you trigger the route that loads the module into the browser with the related breakpoints in vscode it should work
himanshupareek66 over 4 years

The last one "npm start" before debugging helped me.
Scala Enthusiast over 2 years

Though this might have caused the desired effect in your case, it's not a solution IMHO. Feel free to disagree.