首先安装Debugger for Chrome或Edge插件，再配置launch.json文件指向HTML页面，通过设置断点并启动调试，即可在浏览器中实现DOM、网络及JavaScript的调试，结合Live Server可支持热重载与实时预览。
VSCode 本身不直接运行或调试 HTML 文件，但可以通过插件和浏览器配合实现调试功能。调试 HTML 代码通常是指在浏览器中查看页面行为、检查 DOM 结构、监控网络请求或调试嵌入的 JavaScript 逻辑。以下是使用 VSCode 调试 HTML 代码的完整设置与操作方法。
安装必要插件
要实现 HTML 调试，需借助 Debugger for Chrome 或 Debugger for Edge 插件，让 VSCode 与浏览器建立连接。
- 打开 VSCode 扩展面板（Ctrl+Shift+X）
- 搜索并安装 “Debugger for Chrome” 或 “Debugger for Microsoft Edge”
- 确保本地已安装 Google Chrome 或 Microsoft Edge 浏览器
配置 launch.json 调试文件
在项目根目录下创建 .vscode 文件夹，并添加 launch.json 配置文件，用于定义调试行为。
操作步骤：- 点击左侧活动栏的“运行和调试”图标（虫子形状）
- 点击“创建 launch.json 文件”
- 选择环境，如 Chrome 或 Edge
- 修改配置，使其指向你的 HTML 文件
示例 launch.json 配置（以 Chrome 为例）：
立即学习“前端免费学习笔记（深入）”；
{
"version": "0.2.0",
"configurations": [
{
"name": "打开 index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html"
}
]
}
说明：${workspaceFolder} 指当前项目根目录，可替换为具体路径。
启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。
启动调试
配置完成后，即可开始调试。
- 在 HTML 文件中找到需要调试的 JavaScript 代码段
- 在 JS 代码行号处点击，设置断点（红点）
- 回到“运行和调试”面板，选择刚配置的调试项，点击“启动调试”按钮（F5）
- 浏览器会自动打开 HTML 页面，执行到断点时暂停
- 此时可在 VSCode 中查看变量值、调用栈、逐步执行等
支持的操作包括：
- 单步跳过（F10）
- 单步进入（F11）
- 继续执行（F5）
- 查看变量和作用域
结合 Live Server 提高效率
如果希望实时预览 HTML 变化，推荐安装 Live Server 插件。
- 右键 HTML 文件，选择“Open with Live Server”
- 页面在浏览器中打开并支持热重载
- 配合 Debugger for Chrome 使用，仍可进行断点调试
注意：Live Server 启动的是本地服务器（http://127.0.0.1:5500），因此 launch.json 中应使用 url 而非 file 字段：
{
"name": "调试本地服务器页面",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}"
}
基本上就这些。通过合理配置，VSCode 就能成为调试 HTML 和内联 JavaScript 的高效工具。关键在于连接浏览器调试协议，并正确设置路径与断点。
