如何在Create React App中让DevTools性能分析器显示正确的源文件链接？

我之前在CRA+TS项目里也碰到过一模一样的情况——console.trace能正常显示源文件，但Performance面板里的链接就是跳不对，折腾了一阵终于找到几个靠谱的解决办法：

1. 确认项目的源映射生成配置没被禁用 #

Create React App默认在开发环境会自动生成source maps，但如果你在配置里手动关闭了，就会出现这个问题：

• 检查项目根目录的.env文件，看是否有GENERATE_SOURCEMAP=false，如果有，改成GENERATE_SOURCEMAP=true或者直接删除这一行
• 查看package.json的scripts字段，确认start命令有没有加GENERATE_SOURCEMAP=false前缀，比如"start": "GENERATE_SOURCEMAP=false react-scripts start"，如果有，去掉这个前缀即可

2. 开启Chrome DevTools性能面板的源映射支持 #

Chrome的性能面板对源映射有单独的控制开关，有时候默认没开启：

1. 打开Chrome DevTools，点击右上角的三个点 → Settings
2. 切换到Experiments标签页，确保勾选了JavaScript source maps和Enable JavaScript source maps in Performance panel（不同Chrome版本选项名可能略有差异，找类似描述的选项即可）
3. 回到Performance面板，点击右上角的齿轮图标，确认Show source maps（如果存在该选项）处于勾选状态

3. 清除缓存并重启服务 #

缓存是这类问题的常见元凶，按以下步骤操作试试：

• 先终止开发服务器（关掉npm start的进程）
• 关闭Chrome的DevTools窗口，然后用Ctrl+Shift+R硬刷新页面，或者在DevTools的Network面板勾选Disable cache后再刷新
• 重新启动开发服务器，打开DevTools再次进行性能分析

4. 尝试生产构建调试（备选方案） #

如果上面的方法都没效果，可以试试生产环境的构建调试：

1. 在项目根目录执行GENERATE_SOURCEMAP=true npm run build
2. 用静态服务器运行构建产物，比如npx serve -s build
3. 打开页面后再用DevTools做性能分析，看看源映射是否正常工作

至于为什么console.trace正常但性能面板不行——两者对源映射的处理逻辑不一样：console.trace依赖的是运行时的源映射解析，而性能分析器需要更完整的源映射文件，且有单独的开关控制，缓存也更容易影响到它的解析。

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