VS Code 无法直接调试 HTML5，断点必须设在 JavaScript 中；需配置 Debugger 扩展、launch.json、sourceMap，并用浏览器 Performance 面板协同定位渲染或 JS 阻塞问题。
VS Code 里没法对 HTML5 页面设断点？先确认是不是在调试 JavaScript
VS Code 本身不直接“调试 HTML5”，它调试的是运行在浏览器中的 JavaScript。所谓“HTML5 页面卡壳”，实际卡在 JS 执行、DOM 渲染或资源加载环节。如果你在 index.html 文件里点了行号左侧设断点，那是无效的——HTML 不是可执行代码，断点必须落在 块内、外部 .js 文件中，或通过 debugger 语句触发。
- 确保你已安装并启用
Debugger for Edge或Debugger for Chrome扩展（二者选一，别共存） - 项目根目录下有
.vscode/launch.json，且配置了正确的type（如"pwa-chrome"）、url（如"http://localhost:5500/index.html"）和webRoot（如"${workspaceFolder}"） - 用 Live Server 启动页面时，注意端口是否和
launch.json中的url一致；不一致会导致断点灰掉、无法命中
断点打了但没停住？检查 sourcemap 和文件映射是否错位
现代前端工程常经构建（Vite、Webpack 等），源码是 src/main.js，浏览器跑的是 dist/assets/main.xxxx.js。VS Code 断点要生效，必须靠 sourcemap 把压缩/转译后的代码位置映射回源码行号。如果断点打在源码却没停，大概率是 sourcemap 没生成、路径不对，或浏览器禁用了 sourcemap。
- 浏览器开发者工具中打开
Settings → Preferences → Sources → Enable JavaScript source maps（Chrome/Edge） - Vite 项目默认开启 sourcemap，但若你改过
vite.config.ts中的build.sourcemap，请确认为true或"inline" - 检查
launch.json的sourceMapPathOverrides是否需要配置，尤其当项目结构含/src/但生成路径是/时，常见修复项："webpack:///src/*": "${webRoot}/src/*"
页面卡顿不是断点问题，而是渲染或 JS 阻塞？用 VS Code + 浏览器协同排查
“卡壳”常被误认为断点失效，实则是页面无响应（白屏、按钮点不动、动画冻结）。这时候 VS Code 的断点帮不上忙，得靠浏览器的 Performance 面板定位瓶颈，再回到 VS Code 查对应代码。
- 在 Chrome 中按
Ctrl+Shift+P→ 输入Performance→ 开始录制，复现卡顿操作，停止后看 Flame Chart：长条高亮的是主线程阻塞任务（比如一个 200ms 的render()函数） - 若发现大量 Layout / Recalculate Style，说明 CSS 选择器太重或频繁强制同步布局，查
getBoundingClientRect()、offsetHeight等触发回流的调用 - 若 JS 执行时间长，右键火焰图中长任务 →
Reveal in debugger，自动跳转到 VS Code 对应源码行（需 sourcemap 正确）
Live Server 启动后修改 HTML/JS 不热更新？别让缓存和路径搞乱调试节奏
VS Code 调试依赖实时、准确的资源加载。Live Server 默认启用缓存，且某些路径写法（如 ）在不同服务器根路径下可能 404，导致 JS 没加载、断点自然无效。
立即学习“前端免费学习笔记（深入）”；
- 启动 Live Server 时，右下角点击「Go Live」旁的小齿轮，勾选
Disable Cache (when Live Server is running) - HTML 中引用 JS 优先用绝对路径：把
./js/app.js改成/js/app.js，避免相对路径随当前 URL 变化而失效 - 检查浏览器控制台是否有
Failed to load resource: net::ERR_ABORTED，若有，说明脚本根本没加载成功，断点再准也没用
