React调试时Chrome Sources仅显示bundle.js问题求助

检查React开发工具与兼容性 #

• 确认Chrome已安装React Developer Tools插件，且为最新版本，旧版本可能和当前React版本不兼容
• 在Chrome扩展管理页检查插件状态：确保React DevTools处于启用状态，未被设置为"仅隐身模式可用"

调整Chrome调试的Source Maps设置 #

1. 打开Chrome DevTools（F12），点击右上角齿轮图标进入Settings
2. 找到Sources栏目，勾选以下两项：
   • Enable JavaScript source maps
   • Enable CSS source maps
3. 关闭并重新打开DevTools，刷新页面后触发debugger重试

确认项目启动配置 #

• 若使用Create React App（即使未手动配置Webpack，CRA内部封装了Webpack），确保启动命令为npm start（开发模式自动生成source maps），不要用npm run build的生产构建产物调试
• 若使用Vite等其他工具，确认启动命令为开发模式（vite而非vite build），开发模式默认生成source maps

清除缓存重置配置 #

• 按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，清除静态资源缓存
• 在DevTools的Settings→Preferences中，点击Restore defaults and reload重置DevTools配置，重启调试

检查浏览器隐私设置 #

• 关闭"阻止第三方Cookie"等严格隐私限制，这类设置可能影响source maps加载
• 切换到Chrome正常模式调试，避免使用隐身模式（隐身模式可能禁用插件或限制功能）

内容的提问来源于stack exchange，提问作者Maksymsly