Javascript 如何设置VS代码进行角度调试？

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

ReferenceError: angular is not defined

因此，我尝试使用gulp connect启动服务器。这会很好地启动应用程序，但调试器没有连接，而且它从不在断点处停止

有人能告诉我如何用VS代码调试一个有角度的web吗

另外，这是我的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
  }
  ]
}

---

好的，在@code人的帮助下，我成功了。我现在可以从IDE完全调试Angular客户端了！希望这能帮助其他人

首先，您需要下载“Chrome扩展的调试器”。您可以通过键入以下命令来完成此操作：

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"
        }
    ]
}

另外，别忘了在调试模式下启动Chrome（适用于Mac）：

---

为什么不在浏览器中使用开发人员工具呢？如果希望angular not defined消失，则需要导入angular.d.ts文件。如果可能，我希望从ide进行调试。浏览器很笨重（imho）。我将尝试导入ts文件。谢谢你的提示！如果您使用可视代码进行附加，那么如何启动应用程序？您是否遵循以下步骤手动启动服务器（如从控制台窗口）

2>在chrome中浏览应用程序（如localhost:4000\home）

3>使用附加选项运行VS调试器

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