设置“优化”时无法在 chrome 开发工具中调试：在 angular.json 中为真答案

【问题标题】：Cannot debug in chrome dev tool when setting on "optimization": true in angular.json设置“优化”时无法在 chrome 开发工具中调试：在 angular.json 中为真
【发布时间】：2022-04-19 03:55:18
【问题描述】：

当我在 angular.json 中设置 optimizations = true 时，我们在 chrome devtools 中调试时遇到问题，并且断点未命中，或者在相应的打字稿文件中的错误行。

  "local": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "hidden": false,
                "vendor": false
              },

【问题讨论】：

标签： angular debugging google-chrome-devtools

【解决方案1】：

我认为这是一个 Angular 12 项目？有类似的问题，但措辞略有不同，所以不容易找到……比如Angular 12 Debug source code not available in Chrome Developer tools was fine in Angular 11

正如您可能发现的那样，基本上您需要更新 angular.json 配置选项。在诸如architect -> someNamedBuilder -> configurations -> development 之类的位置，或者就在options 下的architect -> someNamedBuilder 级别：

        {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }

如果没有此配置，您似乎无法在 chrome 开发工具中的断点处停止。

一些文档在这里：https://angular.io/guide/workspace-config，但它对这个问题没有多大帮助......

【讨论】：

谢谢你，丹尼