如何在 Visual Studio Code 中调试客户端？

Question

根据Microsoft Documentation，Visual Studio Code 调试器应该能够调试 typescript 和 javascript。

有问题的是，它们仅提供使用 node 或 python 的服务器端应用程序的示例。 Intellisense 仅建议服务器语言。

是否可以使用 Visual Studio Code 调试器调试客户端打字稿或 javascript 应用程序？

launch.json

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type":"node"      <-- what if I'm building a JS / TS app?
            "request": "launch",
            "name": "Launch Program",
            "program": "${file}",
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

Answer 1

您必须安装一个（或多个）浏览器调试器扩展：Chrome、Firefox、iOS Web 或 Edge。

然后你可以对 Chrome 使用这样的启动配置：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceRoot}"
}

根据您构建的工作流程，您可能需要执行一些额外的步骤才能使源映射正常工作。