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

Question

我有一个 Angular 应用程序，我想在VS Code 中调试它。

当我为应用程序提供服务时，例如ng serve断点被绑定并被击中：

但是，当我通过不同的配置提供服务时，例如，ng serve -c qa或者ng serve -c uat它们变得未绑定：

是否有断点未绑定的原因？在使用不同的环境配置服务时如何获得断点？

---

相关信息

launch.json配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

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"
    }
  ]
},

软件版本控制：

• 视觉工作室代码 1.50.1
• 铬合金 83.0.4103.122
• Chrome 调试器 4.12.11
• JavaScript 调试器（每晚） 2020.10.2217

Answer 1

就我而言，我需要更改网络根目录

从

"webRoot": "${workspaceFolder}"

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

项目名称是您在开始时指定的名称ng new projectName

然后断点绑定。

Answer 2

解决这个问题很简单，我没有在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

Answer 3

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

      "defaultConfiguration": "dev"

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

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

干杯，丹

PS - 更新以添加更好的修复。我在“dev”配置中进行了正确的设置，但您也可以将

"sourceMap": true

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

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

Answer 4

就我而言，我将其追溯到我的 Node 版本 (17) 和我的 Angular 版本 (13) 之间的不兼容，当我运行ng version. 我将 Node 降级到 v16，现在一切正常。还有一个非官方的兼容性列表

Answer 5

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

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

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

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

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

Answer 6

以上都试过了，重启还是不行。没有错误，没有挂起，就像一个断点已经被击中，现在正在等待你，但你只是看不到任何断点被击中以及在哪里。不过独立浏览器Chrome和Edge都运行良好。

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

因此，除了上述所有设置之外，运行 - >禁用所有断点，然后启用所有断点解决了这个问题。

2021-09-17，今天无论如何又停止工作了。最后添加一个新的断点将其恢复。此行为可能与调试器极其滞后有关。绝对是VSC的一个bug。

Answer 7

对我来说，vscode 设置：

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

在 vscode 设置中取消选中“调试”>“Javascript：使用预览” 。

（或在 settings/workspace json 文件中）添加：

"debug.javascript.usePreview": false