VS Code 无法直接调试 HTML5，断点必须设在 JavaScript 中；需配置 Debugger 扩展、launch.json、sourceMap，并用浏览器 Performance 面板协同定位渲染或 JS 阻塞问题。
VS Code 里没法对 HTML5 页面设断点？先确认是不是在调试 JavaScript
VS Code 本身不直接“调试 HTML5”，它调试的是运行在浏览器中的 JavaScript。所谓“HTML5 页面卡壳”，实际卡在 JS 执行、DOM 渲染或资源加载环节。如果你在 index.html 文件里点了行号左侧设断点，那是无效的——HTML 不是可执行代码，断点必须落在 <script></script> 块内、外部 .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 默认启用缓存，且某些路径写法（如 <script src="./js/app.js"></script>）在不同服务器根路径下可能 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，若有，说明脚本根本没加载成功，断点再准也没用
