VSCode调试器连不上Chrome的根源是调试器未连接浏览器，需配置launch.json并以--remote-debugging-port=9222启动Chrome，确保url、port、webRoot及sourcemap路径正确，且无其他Chrome进程占用端口。
VSCode 调试器连不上 Chrome 是什么情况
绝大多数前端调试失败，根源不是代码写错了，而是调试器根本没连上浏览器。VSCode 的 Debugger for Chrome 或新版内置的 Microsoft Edge Tools 扩展需要手动配好 launch.json，且浏览器必须以远程调试模式启动。
- Chrome 启动命令必须带
--remote-debugging-port=9222（端口可改，但要和launch.json中的port一致） -
url字段填的是你实际访问的地址（比如http://localhost:3000），不是本地 HTML 路径；若用file://协议，得配file:///path/to/index.html并启用webRoot - 检查 Chrome 是否已存在其他调试进程：任务管理器里杀掉所有
chrome.exe，再重开 - 如果用 Vite / Webpack Dev Server，确保服务已启动且端口没被占用（
netstat -ano | findstr :3000查 Windows，lsof -i :3000查 macOS/Linux）
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"port": 9222,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
断点不命中？先看 sourcemap 和 webRoot 配不配
你在 src/App.tsx 打了断点，但调试器停在压缩后的 main.js 里，或者直接跳过——大概率是 sourcemap 没生效，或 webRoot 指向错误。
- Vite 默认生成
sourceMap: true，但开发服务器（vite dev）输出的是内存中的 bundle，sourcemap 由 dev server 动态注入，无需额外配置；构建后（vite build）需确认vite.config.ts中build.sourcemap设为true -
webRoot必须指向源码根目录（如${workspaceFolder}/src），不是构建产物目录；否则 VSCode 找不到原始文件映射 - 在 Chrome DevTools 的
Sources面板里展开webpack://或app://，看能否看到你的源文件；看不到说明 sourcemap 解析失败 - 某些框架（如 Next.js）用特殊路径别名（
@/components），需在sourceMapPathOverrides中补映射，例如："webpack:///./*": "${webRoot}/*"
调试 React 组件时 state 更新不触发断点，怎么办
React 的函数组件 + Hooks 本质是闭包调用，useState 的更新是异步批处理的，直接在 setState 后打行断点，往往看不到新值——这不是调试器问题，是执行时机问题。
- 不要在
setCount(count + 1)这一行设断点，而应在下一次渲染的函数体开头设断点（比如组件 return 前） - 利用
useEffect监听 state 变化：useEffect(() => { console.log('count changed:', count); }, [count]);然后在console.log行打断点，能稳定捕获更新后状态 - 开启 React Developer Tools 的 “Highlight updates when components render” 选项，配合 VSCode 断点，快速定位哪次 rerender 没触发
- 避免在事件回调中连续调用多个
setState，它们会被合并；如需逐次调试，可用await new Promise(r => setTimeout(r))强制分帧
调试时修改代码却没反应，热更新失效了？
VSCode 调试器本身不负责 HMR（热模块替换），它只读取当前运行时的 JS 上下文。如果你改了代码但断点没跳到新行、变量值还是旧的，通常是开发服务器没把变更同步给浏览器。
立即学习“前端免费学习笔记（深入）”；
- 检查终端里 dev server 是否报错（如语法错误导致 HMR 中断），重启服务是最稳妥的兜底操作
- Vite 用户注意：
server.hmr.overlay默认为true，出错时页面会显示红色遮罩；关闭它（设为false）可能让错误静默，反而难排查 - Chrome 浏览器禁用缓存（DevTools → Network → ✅ Disable cache）是必须项，否则可能加载旧的
chunk.js - 某些插件（如
eslint-plugin-react-refresh）与@pmmmwh/react-refresh-webpack-plugin冲突，会导致 HMR 失效；优先用框架官方推荐的刷新方案
