在 "optimization" 上设置时无法在 chrome 开发工具中进行调试：在 angular.json 中为真

Question

当我在 angular.json 中设置 optimizations = true 时，我们在 chrome devtools 和 Breakpoints aren't hit 中调试时遇到问题，或者在相应的打字稿文件中的错误行.

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

Answer 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 但它对解决这个问题没有太大帮助...

在 "optimization" 上设置时无法在 chrome 开发工具中进行调试：在 angular.json 中为真

Cannot debug in chrome dev tool when setting on "optimization": true in angular.json

debugging

google-chrome-devtools

angular