javascript - VSCode - Chrome 调试 - 未验证的断点

Question

我在调试 .ts 文件中的 Angular 组件时遇到问题。我正在为 Chrome 扩展程序使用 VSCode 和调试器。

这是我的 vscode 启动文件:

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

这是我的 tsconfig.json 文件:

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

在 Angular 组件内部，我在 $onInit 循环中设置了一个断点:

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

Debus 成功启动(chrome 打开)但没有任何反应。在我的编辑器中，如果我将鼠标悬停在断点上，工具提示会显示一条消息:未验证的断点。已设置断点但尚未绑定(bind)

我使用的是 1.24.1 版本的 vscode。

Answer 1

使用 Visual Studio Code > 打开文件夹... 时，确保打开 package.json 所在的文件夹。