如何在VSCode(Visual Studio代码)中一起调试HTML和JavaScript？

Question

我在VSCode中有一个非常简单的项目,一个链接到单个app.js文件的index.html文件.

当我点击F5时,我想运行和调试这个迷你网站.

如何配置VSCode以在浏览器中打开index.html,然后允许我在app.js中设置断点,这些断点将由我在浏览器中与应用程序的交互触发？

在Visual Studio中,这将"正常工作",因为它会启动自己的Web服务器IIS Express.在VSCode中,我不确定如何设置launch.json和/或tasks.json来创建一个简单的node.js Web服务器并提供index.html.

我已经看到了调试javascript应用程序的一些示例,例如这个launch.json:

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch Bjarte's app",
            "type": "node",
            "program": "app.js",
            "stopOnEntry": true,
            "args": [],
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArguments": [],
            "env": {},
            "sourceMaps": false
        },
        {
            "name": "Attach",
            "type": "node",
            "address": "localhost",
            "port": 5858,
            "sourceMaps": false
        }
    ]
}

这将运行js文件,但我不明白我如何与应用程序进行交互.

Answer 1

现在可以通过Chrome远程调试以及Microsoft发布的扩展程序在vscode中调试Chrome网页. 适用于Chrome的调试器

从该页面可以看出,有两种调试模式,Launch和Attach.我只是设法使用附加模式,可能是因为我没有运行服务器.此扩展具有所有重要的调试工具功能:局部变量,断点,控制台,调用堆栈.

重新访问vscode的另一个原因是它现在具有对ECMAScript 6的IntelliSense支持,ECMAScript 6显示了我尝试过的其他"IntelliSense"解决方案中看不到的方法,如SublimeCodeIntel或最新版本的WebStorm.

Answer 2

看起来我想做的事情在VSCode中是不可能的(但是？).我现在的解决方案是使用节点包live-server.安装时

> npm install -g live-server

然后打开VSCode,右键单击项目根文件夹中的任何文件,然后选择"在控制台中打开".然后输入

> live-server

以项目为根文件夹启动服务器.实时服务器将打开您的默认浏览器,并监视您的项目文件夹以查找任何文件,并在每次进行任何更改时重新加载html页面.

我应该提一下,我使用live-server的解决方案不允许我在VSCode中调试我的应用程序,只在浏览器中运行它.我在Chrome中调试.

Answer 3

就像其他人说的那样，您安装了这个：

您可以使用https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

如果你运行的不是本地主机而是一些 HTML 和 JavaScript，你可以使用这个launch.json代码。

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch index.html",
        "type": "chrome",
        "request": "launch",
        "file": "${workspaceFolder}/index.html"
    }
]

}