Question

我正在使用带有Angular 2/4的WebPack，并且正在使用延迟加载的模块。因此，这些模块和组件不包含在主.js文件中，代码驻留在WebPack生成的其中一个文件中：0.js，1.js等等。

我的问题是Chrome和VS Code都无法出于某种原因调试这些文件中的代码。当我将代码包含在主.js文件中时，调试工作正常。我有什么可以做的吗？

示例：

我有一个小指令，用于显示HTML元素中的本地时间。我在一个延迟加载的组件中使用此指令。当我尝试调试指令（或其他任何延迟加载的代码）时，VS Code会说：

Chrome中也无法进行调试。但是如果我在根组件中使用该指令（或其他任何非延迟加载的），断点在VS Code以及Chrome中都有效。

我将其跟踪到WebPack为主客户端和延迟加载的部分生成的文件。每个延迟加载的组件都位于名为0.js，1.js的文件中，依此类推 - 我认为这可能是问题的原因。

MAP文件

相应地生成用于调试的映射文件，这是我的输出：

Answer 1

我遇到了同样的问题。除了延迟加载的模块之外，在我的所有文件/模块中使用VSCode调试在Angular中命中断点。

有两个问题需要解决： 1）最新的Angular CLI打破了调试 - 这可以通过更新launch.json来修复 - 添加以下内容：

"sourceMapPathOverrides": {
     "webpack:/*": "${webRoot}/*"
}

2）将debugger;命令添加到您尝试调试的延迟加载文件中的部分代码中 - 一旦debugger;行被命中，所有断点将开始为延迟加载模块

如果您的断点已经正常工作，则可以忽略第一步。第二步是解决方法，但是应该让断点工作，我们可以弄清楚如何正确解决这个问题!!

Answer 2

看起来没有创建* .js.map文件。

如果您正在使用角度CLI并激活 ng build --prod ，它将构建用于生产，如果您运行 ng build --dev <，则不会生成* .js.map文件/ strong>然后它将生成* .js.map文件。

如果生成* .js.map文件，则可以调试js代码。

Answer 3

使用 VS-Code 在 Angular-12 中调试 - 将这两个文件（launch.json 和 task.json）添加到 .vscode 文件夹中。 vscode调试快捷键Shift+Ctrl+D

**launch.json**
{
"version": "0.2.0",
"configurations": [
  // Based on: https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI
  {
    "name": "Launch ng serve & Chrome",
    "type": "pwa-chrome",
    "request": "launch",
    "preLaunchTask": "npm: start",
    "url": "http://localhost:4200/",

    // Note: The ./client directory
    "webRoot": "${workspaceFolder}",
    
    "sourceMaps": true,
    "sourceMapPathOverrides": {
      "webpack:/*": "${webRoot}/*",
      "/./*": "${webRoot}/*",
      "/src/*": "${webRoot}/*",
      "/*": "*",
      "/./~/*": "${webRoot}/node_modules/*"
    }
  },
]}  


**tasks.json**
{
    "version": "2.0.0",
    "tasks": [
      {
        "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."
            }
          }
        },
  
        "options": {
          // Note: The ./client directory
          "cwd": "${workspaceFolder}"
        },
  
      },
    ]
  }

在Chrome / VS Code中调试延迟加载的Angular 2模块

3 个答案: