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 查对应代码。
