VSCode调试HTML本质是调试浏览器中的JS，需通过Chrome/Edge启动并附加调试器；必须安装对应浏览器、配置launch.json（type: "pwa-chrome"）、确保HTML含可调试JS代码，且webRoot与file:///路径匹配。
VSCode 调试 HTML 本质是调试浏览器里的 JS，不是直接跑 HTML
VSCode 本身不执行 HTML，它靠启动浏览器（通常是 Chrome 或 Edge）并附加调试器来实现断点、变量查看等功能。所以你看到的“调试 HTML”，实际是：打开一个本地 HTML 文件 → 浏览器加载 → VSCode 通过 Debugger for Chrome 或内置的 Microsoft Edge DevTools 扩展接管 JS 执行流。
常见错误现象：Debugger attached 一闪而过但断点不命中；点击“运行”没反应；F5 报错 Cannot connect to runtime process。
- 必须确保已安装对应浏览器（Chrome/Edge）且路径可被 VSCode 识别（默认通常能自动找到）
- HTML 中需有可调试的 JS 代码——纯静态 HTML（无
<script>或只含内联console.log）无法设断点，除非加了debugger语句 - 推荐用
launch.json配置type: "pwa-chrome"（新版推荐），而非老旧的type: "chrome"（已弃用） - 如果用 Live Server 插件预览页面，别直接点浏览器地址栏调试——VSCode 无法附加，必须通过
F5启动调试会话
配置 launch.json 的关键参数和坑点
VSCode 调试依赖工作区根目录下的 .vscode/launch.json。最简可用配置不是模板生成的“全功能版”，而是聚焦路径和启动方式。
典型错误：webRoot 指向错误导致断点映射失败；file: 协议下 url 写成 http://；没加 sourceMaps: true 导致压缩 JS 断点错位。
立即学习“前端免费学习笔记（深入）”；
-
request: "launch"表示本地文件启动，不是 attach 远程进程 -
url字段对本地 HTML 必须用file:///绝对路径，例如"file:///c:/project/index.html"（Windows）或"file:///Users/name/project/index.html"（macOS/Linux） -
webRoot应设为项目根目录（如"${workspaceFolder}"），否则浏览器加载的脚本路径和 VSCode 中文件路径对不上，断点变空心圆 - 若 HTML 引用了外部 JS（比如 CDN 或
./script.js），确保该 JS 可访问且带 source map（否则只能在 HTML 里写debugger临时停住）
不用 launch.json 的快速调试法：直接在 HTML 里写 debugger
适合临时验证逻辑、没配好环境或只想单步看某一行。只要浏览器开发者工具开着，debugger 就生效，VSCode 也能同步显示调用栈和作用域。
注意这不是“VSCode 特性”，而是 JS 标准行为，但 VSCode 的调试器能接管并提供更好体验。
- 在
<script>块里加debugger;，保存后用 Live Server 打开页面，F12 开发者工具会自动暂停 - 此时 VSCode 若已启用调试适配（如装了
Debugger for Edge），会自动弹出调试面板，显示当前作用域变量 - 别在生产 HTML 里留
debugger，构建工具（如 Vite、Webpack）默认会删掉，但开发时最省事 - 如果
debugger不触发，检查浏览器是否禁用了断点（开发者工具 → 设置 → “Disable JavaScript breakpoints” 是否勾选）
常见报错和绕过方案
调试失败大多卡在协议、权限或路径上，而不是代码逻辑问题。
典型错误信息：Unable to launch browser: "Could not find Chrome installation"；ERR_CONNECTION_REFUSED；断点灰色（unbound breakpoint）。
- Chrome 找不到？手动指定
runtimeExecutable，例如"runtimeExecutable": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"（macOS）或"C:\Program Files\Google\Chrome\Application\chrome.exe"（Windows） - ERR_CONNECTION_REFUSED？说明 VSCode 尝试走 http 启动但没起服务——确认你用的是
file:协议启动，不是误配了url: "http://localhost:3000"却没开本地服务器 - 断点灰色？90% 是
webRoot不对或 HTML 里 JS 路径是相对路径（如src="./a.js"），VSCode 找不到对应源文件 - Mac 上首次运行可能被系统拦截：“已损坏，无法打开”。去“访达 → 右键应用 → 显示简介 → 仍要打开”放行一次即可
webRoot 和 url 的配合上，反复试几次路径拼写和斜杠方向，比查文档更快。 
