VSCode - Chrome Debug - Unverified Breakpoint

Question

I have a problem with debugging my angular component inside .ts file. I'm using VSCode and Debugger for Chrome extension.

Here is my vscode launch file:

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome", "url": "http://localhost:5000", "sourceMaps": true, "webRoot": "${workspaceRoot}" } ] }

Here is my tsconfig.json file:

{ "compile": true, "comments":true, "module": "none", "target": "es5", "sourceMap": true, "sourceRoot": "", "mapRoot": "", "declaration": false }

Inside angular component, I've set a breakpoint in $onInit cycle:

$onInit = () => { for(let i = 0; i < 5; i++) { //here I put breakpoint let t = i; } }

Debus starts successfully (chrome opens) but nothing happens. In my editor, if I hover over breakpoint, the tooltip shows with a message: Unverified breakpoint. Breakpoint set but not yet bound

I am using 1.24.1 version of vscode.

Phillip Ngan · Accepted Answer · 2018-08-29 08:17:31Z

5

When using Visual Studio Code > Open Folder..., make sure you open the folder in which package.json is located.

answered Aug 29, 2018 at 8:17

Phillip Ngan

16.3k12 gold badges71 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Borjovsky Over a year ago

I have a similar problem (version 1.28.2), but this has no effect.

SystemicPlural Over a year ago

Thanks Phillip, took me half an hour to find this. An alternative is to add the path to package.json in the webRoot property. EG: "webRoot": "${workspaceRoot}/client"

Collectives™ on Stack Overflow

VSCode - Chrome Debug - Unverified Breakpoint

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related