如何为 Angular 调试设置 VS 代码？

Question

我正在尝试设置 Visual Studio 调试代码 Angular。如果我只是使用 launch.json 的开箱即用版本并将其指向 /js/app.js 文件，它 returns:

ReferenceError: angular is not defined

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

谁能告诉我如何使用 VS Code 调试 angular 网站？

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

我只能使用 "attach" 方法，所以我将其与 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"
        }
    ]
}

此外，不要忘记在调试模式下启动 Chrome（对于 Mac）：

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

如何为 Angular 调试设置 VS 代码？

How do I setup VS Code for Angular Debugging?

javascript

debugging

angularjs

visual-studio-code