vscode如何调试html

在VSCode中，打开HTML文件，点击左侧调试图标，选择“添加配置”，选择“Chrome”或其他浏览器，保存后即可开始调试。

1. 安装 VS Code

你需要在你的计算机上安装 Visual Studio Code，你可以从官方网站（https://code.visualstudio.com/）下载并安装适合你操作系统的版本。

2. 打开 HTML 文件

在 VS Code 中打开你的 HTML 文件，你可以通过点击左侧的文件浏览器图标，然后选择你的 HTML 文件来打开它。

3. 配置调试环境

3.1 安装扩展

为了在 VS Code 中调试 HTML，你需要安装一些扩展，按 Ctrl+Shift+X 打开扩展面板，搜索以下扩展并安装：

- Live Server

- Chrome Debugger

3.2 配置 launch.json 文件

接下来，我们需要配置 launch.json 文件以设置断点和调试选项，按 F5 或点击顶部的绿色三角形按钮启动调试会话，这将自动生成一个名为 launch.json 的文件。

在 launch.json 文件中，找到 "configurations" 部分，将其更改为以下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

4. 添加断点

在你的 HTML 文件中，你可以在 JavaScript 代码中添加断点，只需在行号旁边点击鼠标左键即可添加断点。

5. 开始调试

现在，我们可以开始调试了，按 F5 启动调试会话，VS Code 将自动打开一个新的 Chrome 窗口，在 Chrome 窗口中，你的网站应该已经加载并运行，当代码执行到断点时，它将暂停，允许你逐步执行代码、查看变量值等。

6. 使用调试工具

在调试过程中，你可以使用 VS Code 顶部的调试工具栏来控制调试会话，以下是一些常用的按钮：

- 继续/恢复：跳过当前断点，继续执行代码。

- 步进：逐行执行代码，直到下一个断点。

- 步入：进入函数内部，逐行执行代码。

- 步出：执行完当前函数的剩余部分，然后跳到下一个断点。

- 停止：终止调试会话。