如何在Visual Studio Code中调试客户端？ [英] How to debug client-side in Visual Studio Code?

问题描述

根据 Microsoft文档，Visual Studio Code调试器应该能够

According to the Microsoft Documentation, the Visual Studio Code debugger should be able to debug typescript and javascript.

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

Problematically, they only provide examples for server side apps using node or python. Intellisense only suggests server languages.

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

Is it possible to debug client-side typescript or javascript apps with the Visual Studio Code debugger?

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

推荐答案

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

You have to install one (or more) of the browser debugger extensions: Chrome, Firefox, iOS Web or Edge.

然后，您可以为Chrome使用这样的启动配置：

Then you can use launch configuration like this for Chrome:

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

根据构建工作流程的不同，您可能还需要执行一些其他步骤才能使源地图正常工作。

Depending on you build workflow, you may have to do some additional steps to get source maps to work.

这篇关于如何在Visual Studio Code中调试客户端？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！