未绑定断点 - VS Code | Chrome | Angular

Question

我有一个 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 Code 1.50.1
Chrome 83.0.4103.122
Debugger for Chrome 4.12.11
JavaScript Debugger (Nightly) 2020.10.2217

Answer 1

解决这个问题很简单，我没有在 angular.json 中将 sourceMap 属性设置为 true对于那个特定的环境，我有 "sourceMap": false,

有关详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap。

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

Answer 2

对我来说，vscode 设置：

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

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

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

"debug.javascript.usePreview": false

Answer 3

对我来说，我通过将此选项添加到 webpack.config.js:

解决了这个问题

devtoolModuleFilenameTemplate: '[absolute-resource-path]'

Answer 4

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

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

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

2021-09-17，今天无论如何它又停止工作了。最后添加一个新的断点把它取回来。此行为可能与 debugger extremely lagging 有关。绝对是 VSC 的一个错误。

Answer 5

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

去这个网站分析你的日志。 https://microsoft.github.io/vscode-pwa-analyzer/index.html

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

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

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

Answer 6

在我的例子中，我需要更改 webroot

来自

"webRoot": "${workspaceFolder}"

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

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

然后断点绑定。

Answer 7

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

      "defaultConfiguration": "dev"

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

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

干杯，旦

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

"sourceMap": true

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

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

Answer 8

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

Answer 9

我在我的 vueJS 项目中遇到了同样的问题。在对文件等进行任何更改之前尝试一些为我解决的问题：

在 ClientApp/App 文件夹中： 1.Delete node_modules 文件夹 2.Delete package-lock.json 文件 3.Open ClientApp/App 文件夹的命令提示符 4.Use 命令“npm i”

这最后一步将重新安装所有 node-modules。我遇到的问题一定是相互矛盾的 node-module.

Answer 10

对我来说，这里的建议并没有解决问题，但是重启（退出并再次打开）VS Code 解决了！

未绑定断点 - VS Code | Chrome | Angular

Unbound breakpoint - VS Code | Chrome | Angular

google-chrome

visual-studio-code

angular

vscode-debugger

angular10

相关信息

angular.json 示例环境配置：

软件版本控制：