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.

Answer 1

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