Question

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

设置了断点，但尚未绑定

我找到了一个与此主题有关的blog post："Visual Studio Code Breakpoints for Angular Multi-Project Workspace"。我在GameManager中添加了以下内容，并用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/*", }, }，但仍然无法正常工作。

文件夹结构：

有人可以帮助我完成这项工作吗？

Answer 1

我可以使用.scripts命令来找到sourceMapPathOverrides属性的正确路径。

    {
      "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/*",
      },
  }

Answer 2

在我的情况下，使用Angular 9的多项目工作区（因此使用Ivy和AOT），我必须将raise ValidationError( things)设置为我捆绑脚本（带有* .js.map文件）的位置，所以它是：{ {1}}。

感谢.scripts能够列出所有路径无效的文件。

因此，在那之后，我只需要简单地调整webroot中的路径。路径应相对于"webRoot": "${workspaceFolder}/MyWebProj/wwwroot"。

sourceMapPathOverrides

Answer 3

我正在将角度为10的工作区与应用程序和库一起使用，而在设置库中的断点时遇到了麻烦。

我需要告诉“ ng serve”包括供应商的源地图...

在项目/“我的应用” /架构师/“服务” /选项下的“ angular.json”中添加“ sourceMap”对象：

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build",
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            }
          },

ng build my-library
ng serve my-app

launch.json：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "my-app",
            "url": "http://localhost:4200", 
            "webRoot": "${workspaceFolder}/projects/my-app",
            "sourceMaps": true,
        }
    ]
}

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

3 个答案: