angular - 如何在 Visual Studio Code 中调试 Angular 多项目工作区

Question

如何使用 VS Code - Debugger for Chrome 在 VSCode 中调试 Angular 多项目工作区?迁移到 Angular 多项目工作区后，调试不再起作用。如果我设置了断点，我会收到以下消息。

Breakpoint set but not yet bound

我找到了一个 blog post关于这个话题: "Visual Studio Code Breakpoints for Angular Multi-Project Workspace" .我在 launch.json 中添加了以下内容，我换了 "webRoot": "${workspaceRoot}""与 "webRoot": "${workspaceFolder}" :

{
    "name": "Launch new-app in Chrome against localhost (with sourcemaps)",
    "type": "chrome",
    "request": "launch",
    "runtimeExecutable": "/usr/bin/chromium-browser",
    "runtimeArgs": [
        "--disable-extensions"
    ],
    "url": "http://localhost:4200",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "/./*": "${webRoot}/projects/new-app/*",
        "/src/*": "${webRoot}/projects/new-app/src/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*",
    },
}

我也换了 new-app使用正确的应用程序名称，但它仍然不起作用。

文件夹结构:



谁能帮我解决这个问题？

Answer 1

我通过使用 .scripts 来完成这项工作命令找出 sourceMapPathOverrides 的正确路径属性(property)。

    {
      "name": "Launch editor in Chrome against localhost (with sourcemaps)",
      "type": "chrome",
      "request": "launch",
      "runtimeExecutable": "/usr/bin/chromium-browser",
      "runtimeArgs": [
        "--disable-extensions"
      ],
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
          "webpack:/*": "${webRoot}/projects/apps/editor/*",
          "webpack:///./src/*": "${webRoot}/projects/apps/editor/src/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*",
      },
  }