Debugging 如何在VSCode（Visual Studio代码）中一起调试HTML和JavaScript？

当我点击F5时，我想在一个迷你网站上运行并调试一个带有javascript文件的html页面

如何配置VSCode以在浏览器中打开html页面，然后允许我在javescript文件中设置断点，该断点将由我在浏览器中与应用程序的交互触发

在VisualStudio中，这会起作用，因为它会启动自己的web服务器IIS Express。在VSCode中，我不确定如何设置launch.json和/或tasks.json来创建一个简单的node.js web服务器和服务index.html

我看过一些调试javascript应用程序的示例，例如this 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文件，但我不知道如何与应用程序交互。

VSCode将使用node启动你的应用程序，这意味着你的应用程序正在某个端口上运行。您可以通过访问与应用程序交互 如果您在app.js中设置了断点，则在您通过节点访问运行本地的站点后，应立即点击该断点。

---

这是一个很好的演示

似乎我想做的事情在VSCode中还不可能实现？。我目前的解决方案是使用节点包live server。安装

> npm install -g live-server

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

> live-server

以项目作为根文件夹启动服务器。Live server将打开默认浏览器，并监视项目文件夹中的任何文件更改，并在每次更改时重新加载html页面

---

我应该提到，我使用live server的解决方案不允许我在VSCode中调试我的应用程序，只能在浏览器中运行它。我正在用Chrome进行调试。

现在可以使用Microsoft发布的扩展通过Chrome远程调试在vscode中调试Chrome网页。

从该页面可以看到，有两种调试模式：启动和附加。我只使用了附加模式，可能是因为我没有运行服务器。此扩展具有所有重要的调试工具功能：本地变量、断点、控制台、调用堆栈

重新访问vscode的另一个原因是它现在对ECMAScript 6提供了IntelliSense支持，它显示了在我尝试过的其他类似IntelliSense的解决方案中不可见的方法，如SubligeCodeIntel或最新版本的WebStorm。

您可以使用

在launch.json中，您只需输入所使用服务器的url值，然后就可以使用编辑器visual studio代码调试html+js

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://127.0.0.1:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

---

正如其他人所说，您安装了以下内容：

你可以用

如果您运行的不是本地主机，而是一些HTML和JavaScript，那么可以使用launch.json代码

---

}

我不想只为一些HTML和JavaScript运行服务器，这与类似的示例不同：此VS代码启动配置以及“Chrome调试器”扩展在我的Windows 10计算机上起了作用：

  {
     "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch HTML file",
                "type": "chrome",
                "request": "launch",
                "file": "${file}"
            }
        ]
    }

---

如果您有类似C:\C\mypage.htm的路径，您可以使用FF&ex.fileBasename或-在Chrome中不起作用：

.vscode\launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch HTML file",
            "type": "firefox",
            "request": "launch",
            "file": "C:/C%23/${fileBasename}"
         }
    ]
}

或使用node.js测试的简单完整路径：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}

---

感谢您的回复，但我不知道如何使用视频中的信息来运行显示HTML文件的node.js服务器。我看到的这本指南和其他指南的问题是，它们只使用JavaScript创建整个网站，但我想创建一个简单的HTML页面，只添加一点JavaScript。请注意，如果您愿意，可以使用Firefox的调试器提供类似的解决方案。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/${fileBasename}"
        }
    ]
}