React CRA项目DevTools的Sources面板无法显示src文件夹怎么办？
2026-7-26
CRA项目DevTools Sources面板看不到src文件夹的解决方法
在用Create React App开发React项目、进行代码分割时，若Chrome DevTools的Sources面板里找不到src文件夹，可按以下步骤解决：
1. 确认运行环境
必须使用npm start或yarn start启动开发服务器，生产构建（npm run build）后的代码经过压缩混淆，不会保留src目录的原始结构。
2. 检查Source Map配置
CRA默认在开发环境生成Source Map，若你手动修改过配置：
- 打开项目根目录的
package.json，若存在"GENERATE_SOURCEMAP": "false"，将其删除或改为"true"。 - 重启开发服务器，让配置生效。
3. 在DevTools中定位src目录
配置正确后，打开Sources面板：
- 找到并展开
webpack://目录，就能看到./src文件夹，里面是你的源码文件。 - 若看不到
webpack://，点击面板左上角的「>>」按钮，勾选「webpack」选项即可显示。
4. 排查插件兼容性
如果你安装了React DevTools插件，确保它是最新版本，旧版本可能和CRA的新构建配置冲突，导致目录显示异常。
当前面板显示情况：仅展示编译后的打包文件，无src目录结构
教程面板显示情况：在webpack://目录下可见完整的src文件夹及源码文件
内容的提问来源于stack exchange，提问作者Benjoe Carandang
相关产品推荐
相关产品推荐
