Question

我正在尝试设置Visual Studio代码以调试Angular。如果我只使用现成的launch.json版本并将其指向/js/app.js文件，它将返回：

ReferenceError: angular is not defined

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

有人可以告诉我如何使用VS Code调试角度网络吗？

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客户端！希望，这将有助于其他人...

首先，您需要下载适用于Chrome扩展程序的＆＃34;调试程序。＆＃34;您可以通过输入以下命令来执行此操作：

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

安装完成后，我使用了MSFT的说明：

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

我只能得到＆＃34;附加＆＃34;方法工作，所以我用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 Debugging设置VS代码？

1 个答案: