未绑定断点 - VS Code |铬 |角答案

【问题标题】：Unbound breakpoint - VS Code | Chrome | Angular未绑定断点 - VS Code |铬 |角
【发布时间】：2021-02-11 19:09:48
【问题描述】：

我有一个 Angular 应用程序，我正在尝试在 VS Code 中进行调试。

当我编译并运行应用程序 (ng serve) 时，断点被绑定：

但是，当我指定不同的配置时，例如-c qa 或 -c uat 它们未绑定：

为什么当我指定不同的断点时未绑定配置？
如何为针对特定环境的调试会话绑定断点？

相关信息

angular.json 示例环境配置：

"uat": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.uat.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "extractLicenses": false,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "6kb",
      "maximumError": "10kb"
    }
  ]
},

软件版本控制：

Visual Studio Code1.50.1
Chrome83.0.4103.122
Debugger for Chrome4.12.11
JavaScript Debugger (Nightly)2020.10.2217

【问题讨论】：

也许您可以在 github 上的某个地方发布问题？ github.com/microsoft?q=vscode+debug&type=&language=
有完全相同的问题
只有一个项目，第一次运行正常，后续运行从未成功，似乎超出了上下文，请求转到火星，但应用程序正在等待。我在看这条线设置了断点，它从第一次运行时的纯红色变为空心。没有任何改变。

标签： angular google-chrome visual-studio-code vscode-debugger angular10

【解决方案1】：

解决此问题的方法很简单，我没有在 angular.json 中针对特定环境将 sourceMap 属性设置为 true，而是使用了 "sourceMap": false,

请参阅https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap 了解更多信息。

感谢康纳 - https://github.com/microsoft/vscode-js-debug/issues/872

【讨论】：

【解决方案2】：

在我的情况下，我需要更改 webroot

来自

"webRoot": "${workspaceFolder}"

到 "webRoot": "${workspaceFolder}\projectName"

项目名称是您在开头给出的名称ng new projectName

然后断点绑定。

【讨论】：

谢谢！！！在找到您的回复之前，我今天无法完成这项工作。
对于 Windows 用户，在路径中使用 / 而不是 \
没有这个，我将无法解决问题！非常感谢！

【解决方案3】：

对我来说，vscode 设置：

调试 > Javascript：使用预览会导致断点不被调试器命中。

在 vscode 设置中取消选中 Debug > Javascript: Use Preview。

（或在设置/工作区 json 文件中）添加：

"debug.javascript.usePreview": false

【讨论】：

当我尝试这个时，我得到这个错误：无法连接到运行时进程，10000 毫秒后超时 - （原因：无法连接到目标
@ThiagoPereiraMaia 也许他们已经将预览调试器设置为默认值并删除了旧的调试器，它可以工作，但不太确定。
vscode 中不再有这样的设置1.62.3
@mgPePe 现在当此类设置不退出时，我的解决方案是在“launch.json”文件中将“type”设置为“legacy-node”。您需要安装扩展“[Deprecated] Node Debug (legacy)”（id: ms-vscode.node-debug）来支持这种类型。

【解决方案4】：

以上都试过了，重启还是不行。没有错误，没有挂起，整个应用程序就像一个断点被击中等待你继续，但你只是看不到任何断点被击中。但是独立浏览器 Chrome 和 Edge 都运行良好。

注意，这不仅仅是 Angular，它也发生在 Node 后端！

所以除了以上设置外，Run -> Disable All Breakpoints, 然后 Enable All Breakpoints 解决了。

2021-09-17，今天它再次停止工作，无论如何。最后添加一个新断点将其恢复。此行为可能与debugger extremely lagging 有关。绝对是VSC的一个bug。

【讨论】：

我正在经历与@Jeb50 完全相同的场景，它开始于大约 21 年 9 月 17 日的同一天。对我来说，这只是几个 TypeScript 文件的问题，其他 50 个左右的文件调试仍然可以正常工作。
@jeb50 对我来说，你的答案没有解决，但至少从“未绑定断点”更改为“没有为此文档加载任何符号”

【解决方案5】：

这不会直接回答问题，而是一个了解问题所在的一般提示：启动或附加调试器时设置 trace : true 。停止调试器。看看日志。路径应该在调试控制台中。

访问此网站以分析您的日志。 https://microsoft.github.io/vscode-pwa-analyzer/index.html

点击标签过滤器中的sourcemap.parsing 和runtime.sourcemap。你会看到这样的事情：

至少你现在有一个反馈循环来了解你的 launch.json 如何影响源映射。

启动文件（红色圆圈）也有很多有用的信息

【讨论】：

能否请您详细说明如何“设置跟踪：true”？
@VeganHunter：只需在您的 launch.json 文件中添加以下行：“trace”：true
runtime.sourcemap 不显示，但 sourcemap.parsing 显示。也许这是我的问题的一部分。

【解决方案6】：

在我的情况下，我将其追溯到运行 ng version 时显示的 Node 版本 (17) 和 Angular 版本 (13) 之间的不兼容。我将 Node 降级到 v16，现在一切正常。还有一个inofficial compatibility list

【讨论】：

工作！我尝试了一切都没有成功，降级到 v16 是解决方案。谢谢！

【解决方案7】：

过去，我在上述几个答案中取得了各种成功。本周问题又回来了。出于某种原因，这次我能够通过在我的 angular.json 文件中提供 defaultConfiguration 来解决它。

      "defaultConfiguration": "dev"

这对我来说也没有任何意义，但如果我删除它，我的所有断点都会在运行时变为“未绑定”。

我只是想我会把它放在这里以防它帮助其他人。

干杯，丹

PS - 更新以添加更好的修复。我的“开发”配置中的设置正确，但您也可以放置

"sourceMap": true

在 angular.json 的架构师级别使其成为默认值。这个设置一直是我的问题。默认设置对优化等其他设置也很有帮助：false、预算等。因此，我删除了 defaultConfiguration 行，因为我的开发设置现在是默认设置。

我最近花了很多时间准备 angular.json 设置。 ;-)

【讨论】：

【解决方案8】：

对我来说，我通过将这个选项添加到我的 webpack.config.js 中解决了这个问题：

devtoolModuleFilenameTemplate: '[absolute-resource-path]'

【讨论】：