VS Code 调试 Vue/React 断点不生效，主因是 sourceMap 未启用或调试配置错误：Vue CLI 需设 devtool='source-map'，Vite 需 build.sourcemap=true；Chrome 要开启 source maps，launch.json 中 type 必须为 pwa-chrome 且 sourceMaps:true，webRoot 指向源码根目录；断点应打在 onMounted/useEffect 等钩子内而非函数首行，避开 computed/useMemo 缓存逻辑，并注意 HMR 期间断点暂失效。
vscode 调试 Vue 项目时断点不生效？先确认 sourceMap 和 devtool 配置
Vue CLI 项目默认开启 source map，但如果你用的是 Vite 或手动配置 Webpack，断点失效大概率是构建层没输出可调试的映射文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue CLI 项目检查
vue.config.js中是否误设了devtool: false—— 改成'source-map'或'eval-source-map' - Vite 项目确认
vite.config.ts的build.sourcemap设为true（开发时默认已开，但若改过mode或用了defineConfig({ ... })嵌套，可能被覆盖） - Chrome DevTools 里打开
Settings → Preferences → Sources → Enable JavaScript source maps，VS Code 的launch.json里确保"sourceMaps": true - 常见错误现象：
Debugger attached日志出现，但点击 .vue 文件里的setup()函数内部断点显示“未绑定”，本质是浏览器加载的是编译后 JS，找不到原始位置
React 项目在 VS Code 里 F5 启动就报 Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9229
这是 Chrome 调试协议端口没起来，不是代码问题，而是启动方式和调试器没对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别直接按 F5 —— 先手动以调试模式启动 Chrome：
chrome --remote-debugging-port=9229 --user-data-dir=/tmp/chrome-debug（macOS/Linux）或加个临时目录（Windows） - 再运行你的 React 项目：
npm start或yarn start，等页面加载完成 - VS Code 的
launch.json用chrome类型而非pwa-chrome（旧插件），且必须指定"url": "http://localhost:3000"，不能留空或写错端口 - 如果用的是 Create React App，确保没全局禁用
react-scripts start --inspect-brk—— 这会强制走 Node 调试，和前端 JS 断点无关
launch.json 里该选 pwa-chrome 还是 chrome？
取决于你装的 Debugger for Chrome 插件版本。v4.12+ 已废弃 chrome 类型，统一用 pwa-chrome；但旧项目模板或文档残留了 chrome，会导致断点完全不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 VS Code 扩展面板，搜
msjsdiag.debugger-for-chrome—— 如果已卸载，装ms-vscode.js-debug（官方内置，无需额外安装） -
launch.json中"type": "pwa-chrome"是当前唯一可靠选项；"request": "launch"表示自动拉起浏览器，"request": "attach"表示连已打开的带调试端口的 Chrome - 参数差异：
"webRoot"必须指向你源码根目录（如"${workspaceFolder}/src"），否则import路径解析失败，断点标到错误文件 - 性能影响：启用
"trace": true会生成巨大日志，仅排障时开；日常调试关掉它
Vue/React 项目里 console.log 能看到，但断点进不去组件渲染函数？
这不是配置问题，是框架的响应式更新机制导致断点被跳过 —— 比如 Vue 的 render 函数在依赖变化后异步重入，React 的函数组件在 state 更新后整块重执行，但 VS Code 默认只在首次加载时挂载断点监听。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把断点打在具体逻辑行，而不是函数第一行；比如 Vue 的
onMounted(() => { debugger; })，React 的useEffect(() => { debugger; }, []) - 避免在
computed或useMemo里打断点——它们可能被缓存，实际不执行；换成watch（Vue）或useEffect（React）更可控 - 如果用的是 Vue 3 的
<script setup></script>，确保没有defineProps或defineEmits语法错误 —— 这类错误不会报红，但会让整个 script 区域无法被调试器识别 - 容易被忽略的一点：热更新（HMR）期间断点会暂时失效，等控制台出现
[HMR] Updated modules:再点一次刷新按钮，重新触发断点
