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

at0kjp5o 于 2023-09-28 发布在 Go

关注(0)|答案(3)|浏览(127)

如何使用VS Code - Debugger for Chrome在VSCode中调试Angular多项目工作区？在迁移到Angular多项目工作空间后，调试不再工作。如果我设置了断点，我会得到以下消息。
已设置断点但尚未绑定
我找到了关于这个主题的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，但它仍然不起作用。
文件夹结构：

有人能帮我把这个工作做好吗？

google-chrome

来源：https://stackoverflow.com/questions/58780327/how-can-i-debug-an-angular-multi-project-workspace-in-visual-studio-code

3条答案

按热度按时间

l2osamch1#

我通过使用.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/*",
      },
  }

赞(0）回复(0）举报 2023-09-28

jdzmm42g2#

我正在使用带有app & library的angular 10 workspace，在我的库中设置断点时遇到了问题。
我需要告诉ng serve包含供应商源Map。
在projects /“my-app”/ architect /“serve”/ options下将sourceMap对象添加到angular.json：

"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,
        }
    ]
}

赞(0）回复(0）举报 2023-09-28

juud5qan3#

在我的例子中，使用Angular 9的多项目工作空间（所以使用Ivy和AOT），我必须将webroot设置为捆绑脚本的位置（带有 *. js.map文件），所以它是："webRoot": "${workspaceFolder}/MyWebProj/wwwroot"。
由于.scripts能够列出所有无效路径的文件。
所以在那之后，我不得不简单地调整sourceMapPathOverrides中的路径。路径应该相对于webroot。

{
    "name": "App Debug",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:50120/",
    "webRoot": "${workspaceFolder}/MyWebProj/wwwroot",
    "sourceMaps": true,
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/../src/*",
        "webpack:///../CommonWeb/*": "${webRoot}/../../CommonWeb/*",
        "webpack:///../node_modules/*": "${webRoot}/../../node_modules/*"
    }
}

赞(0）回复(0）举报 2023-09-28

我来回答

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

3条答案

相关问题

热门标签

最新问答