Visual Studio 代码中未验证的断点

Question

我正在尝试调试 VS Code 项目，突然（因为它在一天前工作得很好）我的一些断点变得无法访问：

并且断点列表全部变灰，信息为 Breakpoint set but not yet bound。

我的package.json和.vscode/launch.json在同一级别，我的VS Code版本信息：

但是这个问题还有一些额外的琐事：在某些文件上设置断点确实有效。他们被正确击中。所以对我来说，文件类型、位置、功能或加载时间之间没有关联，有些文件无法为 Chrome 调试器处理...

我的 VS Code 运行配置如下：

  "configurations": [

    {
      "name": "Launch Chrome against localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4210",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    },
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4210/#",
      "webRoot": "${workspaceRoot}"
    },
  ]

我也试过 uninstall/disable/enable chrome 调试器，运行它禁用了所有其他插件。设置断点并重新运行调试器不会像deactivate/reactivate所有断点那样生效。

Answer 1

好的，一段时间后解决方案来了。这一切都是由 Angular 路由机制引起的。如果断点被本地化的组件被 component 导航，断点会立即设置并且可以被命中。对于由 loadChildren 导航的组件，在加载实际页面之前不会验证断点。那么断点就变成了"reachable".

编辑

为了减少 angular 的具体答案，最终的根本原因是未验证的断点设置在尚未发送到浏览器的 JavaScript 代码部分（即子页面未访问过，脚本分区不是 AJAX-requested)

Visual Studio 代码中未验证的断点

Unverified Breakpoint in Visual Studio Code

breakpoints

visual-studio-code

编辑