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

kg7wmglp  于 2022-12-25  发布在  Ionic
关注(0)|答案(2)|浏览(147)

我试图在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,并尝试调整设置,但没有任何效果。
谢谢你的帮忙!

zpf6vheq

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键!

py49o6xq

py49o6xq2#

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

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

如果你在windows上使用斜线/

相关问题