Ionic VS代码中的Angular 调试-断点未绑定

kg7wmglp 于 2022-12-25 发布在 Ionic

关注(0)|答案(2)|浏览(146)

我试图在VS代码中调试我的离子/Angular 项目，但是一旦我启动调试模式，我所有的断点都变成灰色，并且没有绑定。
这是我的发布会

{
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8100",
            "webRoot": "${workspaceFolder}"
}

我的Angular 版本是13.2.3，节点版本是16.14.2。
我在angular.json文件中将souceMap设置为true，并尝试调整设置，但没有任何效果。
谢谢你的帮忙!

ionic-framework

来源：https://stackoverflow.com/questions/71718090/angular-debug-in-vs-code-breakpoints-unbound

2条答案

按热度按时间

zpf6vheq1#

VS代码团队提供一组指令here
基本上，您可以像下面这样配置/创建launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ng serve",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },
    {
      "name": "ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "args": ["${workspaceFolder}/e2e/protractor.conf.js"]
    }
  ]
}

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

你可以按F5键！

赞(0）回复(0）举报 2022-12-25

py49o6xq2#

您的workSpaceDirectory中是否有多个项目？如果有，您必须将其添加到您的路径中。例如：

"webRoot": "${workspaceFolder}/YOURPROJECT1"

如果你在windows上使用斜线/。

赞(0）回复(0）举报 2022-12-25

我来回答

Ionic VS代码中的Angular 调试-断点未绑定

2条答案

相关问题

热门标签

最新问答