如何使用自定义 webpack 构建器调试 Angular CLI 应用程序？答案

【问题标题】：How to debug an Angular CLI app with the custom webpack builder?如何使用自定义 webpack 构建器调试 Angular CLI 应用程序？
【发布时间】：2020-08-30 04:39:04
【问题描述】：

我建立了一个仓库来暴露我的问题：https://github.com/franklin626/custom_webpack_undebuggable

这个 Angular CLI 应用有一个自定义的 webpack 设置 (webpack.config.js)。它还有一个.vscode/launch.json 配置，可以在ng test（单元测试）或ng serve 上从VS Code 进行调试。我可以为我的单元测试设置断点，但在运行 ng serve 时不行：

在 VS Code 的调试选项卡中，我运行“启动 Chrome”例程，然后运行“附加 localhost”。我在other.component.ts:14 上放置了一个断点，然后浏览到 localhost:4200/othermodule 以启动包含OtherComponent 的延迟加载模块OtherModule。

我也不能在home.component.ts:13 上放置断点，即使它位于默认模块中。

VS Code 抱怨断点无法命中，并提示源映射可能存在问题。我可以看到原始资源已加载到浏览器中。怎么回事？

【问题讨论】：

imgur.com/a/woy4MXn

标签： angular webpack visual-studio-code

【解决方案1】：

您可以添加.vscode/tasks.json，标签为debug，如下所示

它将开始构建，启动 chrome 调试并观察变化

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "debug",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

并修改 .vscode/launch.json 以使用 debug 任务作为 preLaunchTask

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome debug",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "debug",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

也将包移动到 devDependencies

npm i -D @angular-builders/custom-webpack

拉取请求

https://github.com/franklin626/custom_webpack_undebuggable/pull/2

【讨论】：

奖励赏金，因为这个答案是最实用的，事实证明 VS Code 在错误的位置创建了我的 .vscode 文件夹......
赞赏有背景的解决方案！这也是这个问题的最佳答案：link

【解决方案2】：

This 指南适用于我的 repo、最新的 vscode 和 chrome 调试器。
请查看results 并按照以下步骤操作：

安装debugger for Chrome
使用以下内容创建 .vscode/launch.json

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

在 Home 或其他组件中设置断点
按 F5 启动调试器

【讨论】：

接受这个答案，因为它是未来其他用户最规范的答案。