如何为 Angular 调试设置 VS Code？

Question

我正在尝试设置 Visual Studio Code 以调试 Angular。如果我只是使用开箱即用的 launch.json 版本并将其指向 /js/app.js 文件，它会返回：

ReferenceError: angular is not defined

所以，我尝试使用 gulp-connect 启动服务器。这可以很好地启动应用程序，但没有附加调试器并且它永远不会在断点处停止。

有人可以告诉我如何使用 VS Code 调试 Angular Web 吗？

PS。这是我的launch.json：

{
  "version": "0.2.0",
  "configurations": [
  {
    "name": "Launch Debug with gulp.js",
    "type": "node",
    "request": "launch",
    "program": "js/app.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": ".",
    "runtimeExecutable": null,
    "runtimeArgs": [
        "--nolazy"
    ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": false,
    "outDir": null
  },
  {
    "name": "Attach",
    "type": "node",
    "request": "attach",
    "port": 5858
  }
  ]
}

Answer 1

好的，在@code 人员的帮助下，我得到了它的工作。我现在可以从 IDE 完全调试 Angular 客户端了！希望这会对其他人有所帮助...

首先，您需要下载“Debugger for Chrome Extension”。您可以通过键入以下内容来执行此操作：

F1
ext Install Extensions
debug (then select Debugger For Chrome)

安装后，我使用了此处的 MSFT 说明：

https://marketplace.visualstudio.com/items/msjsdiag.debugger-for-chrome

我只能使用“附加”方法，所以我将它与 Chrome 一起使用。这是我使用的 launch.son 文件的最终版本：

{
    "version": "0.2.0",
    "configurations": [
        {
            // Use this to get debug version of Chrome running:
            // /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "./www"
        }
    ]
}

另外，别忘了用这个（对于 Mac）以调试模式启动 Chrome：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222