VSCode调试React/Vue断点失效主因是sourceMap配置不当：React需设devtool和devtoolModuleFilenameTemplate；Vue用Vite时launch.json须配url、webRoot及sourceMapPathOverrides；Chrome异常中断可关闭；热更新未刷新sourcemap需强制刷新或重启服务。
VSCode 调试 React 和 Vue 项目不需要额外装插件就能跑起来，但默认配置下断点不生效、源码映射错乱、刷新后断点丢失——根本原因是没配好 sourceMap 或没启用正确的调试器。
React 项目断点不命中？检查 webpack-dev-server 的 sourceMap 配置
create-react-app（CRA）默认开启 sourceMap，但如果你用自定义 webpack 配置（比如 webpack.config.js），必须显式设置：
-
devtool: 'source-map'（生产环境可用）或'eval-source-map'（开发环境推荐，热更新兼容性好） -
output.devtoolModuleFilenameTemplate建议设为'file://[absolute-resource-path]'，否则 VSCode 找不到原始文件路径 - 确保
webpack-dev-server启动时没加--no-info或屏蔽了stats，否则 sourcemap URL 不会注入 HTML
验证方式：打开浏览器开发者工具 → Sources 面板 → 展开 webpack:// → 能看到原始 .tsx 或 .jsx 文件，且行号与编辑器一致，才算成功。
Vue 项目用 Vite 启动时，launch.json 怎么写才让断点生效
Vite 默认生成的 index.html 是静态服务的入口，VSCode 的 chrome 调试器必须和它对齐。直接复用官方模板里的 launch.json 很容易失败，关键改两点：
立即学习“前端免费学习笔记（深入）”；
-
url字段必须指向http://localhost:5173（Vite 默认端口），不能写http://127.0.0.1:5173，Chrome 对 host 名称敏感，会导致 sourcemap 加载失败 - 加上
"webRoot": "${workspaceFolder}"，否则断点会落在编译后的node_modules/.vite/下的产物里 - 如果用了
defineConfig({ resolve: { alias: { '@': '/src' } })，需在launch.json中补"sourceMapPathOverrides"映射，例如："webpack:///src/*": "${webRoot}/src/*"
示例片段：
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
调试时“Paused before potential out-of-bounds access”这类提示怎么关
这是 Chrome 自带的「调试辅助中断」，不是代码错误，而是 DevTools 检测到可能越界（比如数组索引为 -1 或 undefined），默认会暂停。VSCode 会同步这个行为，造成干扰。
- 在 Chrome 开发者工具右上角三个点 → Settings → Debugger → 取消勾选
Pause on caught exceptions和Break on caught exceptions - VSCode 中按
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Debug: Toggle Exception Breakpoint，关闭所有异常中断 - 注意：
Uncaught exception保留开启，它能帮你捕获真正崩溃的问题
为什么改了代码，断点还在旧位置？热更新没触发 sourcemap 更新
React Fast Refresh 或 Vue HMR 在某些场景下不会重发 sourcemap，尤其当你修改的是非组件模块（如工具函数、hooks）或用了动态 import()。此时 VSCode 仍按旧映射解析断点。
- 强制刷新浏览器（
Ctrl+F5），而不是热更新后的页面刷新 - 在终端中重启开发服务器（
npm run dev），确保 sourcemap 全量重建 - 检查浏览器 Network 面板，过滤
.map，确认每次变更后都加载了新时间戳的main.js.map或index.js.map - Vue 3 + TypeScript 项目中，若使用
defineComponent包裹组件但没导出，默认会被 tree-shaking 掉映射关系，加export default再试
最常被忽略的一点：VSCode 的调试会话缓存了 sourcemap 解析结果，关掉当前 debug session，再重新 launch，比清缓存更可靠。
