Chrome 开发者工具中不可用的 Angular 12 调试源代码在 Angular 11 中很好答案

【问题标题】：Angular 12 Debug source code not available in Chrome Developer tools was fine in Angular 11Chrome 开发者工具中不可用的 Angular 12 调试源代码在 Angular 11 中很好
【发布时间】：2022-02-24 21:11:19
【问题描述】：

我在 2 台不同的笔记本电脑上有 2 个类似的项目。第一个项目是用 Angular 11 编写的，并且在开发人员工具的源选项卡中显示的 WebPack 云图标可以很好地调试，因此我可以找到源代码并设置断点...

使用 Angular 12.0.1 编写的第二个项目没有显示任何 WebPack 图标。我读过其他类似的问题，看起来 angular.json 具有所有正确的开发设置（例如 sourceMap true、optimization false、defaultConfiguration development...），但它看起来仍然像 Chrome 开发工具中的生产版本。

我也尝试过 ng serve --configuration development

但仍然没有运气。有什么我遗漏的东西可以调试 V12 项目吗？

【问题讨论】：

标签： angular debugging

【解决方案1】：

我遇到了同样的问题，发现我必须在开发配置中添加sourceMap和优化条目。

 "configurations": {
        "development":{
          "sourceMap": true,
          "optimization": false
        },
        "production": {

构建使用：ng build --configuration development

它现在对我有用。

【讨论】：

我最终使用 VSCode 而不是仅使用 Chrome 作为解决方法进行调试。看着你的回答我可能有问题，因为我只是在做一个 ng serve --configuration... 而不是 ng build --configuration.. 谢谢
为了更清楚，这个配置应该添加到 'angular.json' 文件中相应的 serv 或 build 部分。 tsconfig.json 中是否还有其他更改？
这个解决方案对我有用，我将它用于我的 ng-serve 版本 12.2.15。谢谢德克兰。
这确实有效，但我很好奇为什么我需要使用“--configuration development”，因为我添加了所有 sourceMap: true, optimization: false 到生产配置，以及其他所有内容在生产配置中看起来相同，那么为什么它不适用于常规的“ng serve”？

【解决方案2】：

在将 Angular 11 应用程序更新到 Angular 12（然后到 13）后，我遇到了同样的问题。我使用ng serve 来调试我的角度代码。

因此我不得不添加

"development": {
  "browserTarget": "<App-Name>:build:development"
}

在 angular.json 中生产配置旁边的“服务”/“配置”下。

现在我可以调试了

ng serve --configuration development

【讨论】：

【解决方案3】：

我在一个 Angular 13 项目中遇到了这个问题，但在其他项目中没有。事实证明，调试在 localhost 上不起作用，但在使用任何其他主机时它确实有效。

当我切换到“Angular 应用程序”的调试窗口的“脚本”选项卡时，当我点击其中一个文件时，我开始怀疑，例如runtime.js，我会收到拒绝连接的消息：

解决办法是

设置域名，映射例如“some.lan”到 127.0.0.1。为此，您可以使用本地主机文件（在 Unix 上，即 /etc/hosts），或在您的 DNS 服务器上设置它
编辑“Angular CLI 服务器”运行配置以使用参数-- --host some.lan（请不要跳过附加的 -- 在开头！）
编辑“Angular Application”运行配置以使用 URL“http://some.lan:4200”

然后，像往常一样，首先运行 Angular CLI 服务器（等到它完全加载），然后调试 Angular 应用程序。

【讨论】：