先安装Live Server插件并用其打开HTML文件实现即时预览，再通过Debugger for Chrome/Edge插件配置launch.json连接浏览器调试JavaScript，设置断点后使用运行面板启动调试，实现代码断点、变量监控与单步执行。
在 Visual Studio Code（VSCode）中运行和调试 HTML 文件并不需要复杂的配置，借助浏览器和插件可以快速实现预览与调试。下面介绍完整的操作流程。
1. 安装必要插件：Live Server
VSCode 本身不能直接运行 HTML，但可以通过安装 Live Server 插件来启动本地服务器并实时预览页面。
操作步骤：
- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server，选择由 Ritwick Dey 开发的版本
- 点击“安装”
2. 使用 Live Server 运行 HTML 文件
安装完成后，你可以快速启动本地服务器查看网页效果。
立即学习“前端免费学习笔记（深入）”；
操作方法：
- 打开一个 HTML 文件
- 右键编辑器中的代码，选择 Open with Live Server
- 浏览器会自动打开，地址通常是 http://127.0.0.1:5500/
- 修改代码保存后，页面自动刷新
3. 配置调试环境（使用 Debugger for Chrome / Edge）
如果需要调试 JavaScript 代码（如断点、变量监控），需配合浏览器调试工具。
先安装调试插件：
- 推荐安装 Debugger for Chrome 或 Debugger for Edge
- 同样通过扩展市场搜索并安装
然后配置调试启动项：
示例配置（以 Chrome 为例）：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
注意：确保 Live Server 正在运行，且 URL 路径正确。
4. 开始调试
配置完成后，就可以进行断点调试了。
- 在 JavaScript 代码行号前点击，设置断点
- 回到“运行和调试”面板，选择刚才配置的调试项，点击绿色三角运行
- 浏览器启动并加载页面，当执行到断点时会暂停
- 可在 VSCode 中查看调用栈、变量值、逐行执行等
调试过程中支持：
- 单步跳过（F10）
- 单步进入（F11）
- 继续执行（F5）
- 查看控制台输出（Console）
基本上就这些。整个流程就是：用 Live Server 快速预览，再通过调试插件连接浏览器实现断点调试。不复杂但容易忽略细节，比如路径和服务器状态。只要配置一次，后续都能直接用。
