create-react-app项目Profiler无法录制数据，求排查方法

查看应用运行活动的替代方式 #

• 用Chrome DevTools的Performance面板：直接点击录制按钮，执行页面操作后停止，能看到包括React组件渲染、JS执行、页面布局在内的全链路运行数据，还能筛选出React相关的活动。
• 用React DevTools的Components面板：选中目标组件后，右侧面板会显示Render count（渲染次数）和Rendered by（触发渲染的原因），快速定位组件更新的触发源。
• 手动代码埋点：在组件关键逻辑处用console.time('组件渲染')和console.timeEnd('组件渲染')包裹，或者在useEffect中打印状态变化，追踪特定操作的执行耗时。

Profiler无录制数据的可能原因及解决步骤 #

• 确保在开发环境运行：create-react-app的Profiler仅在开发模式生效，必须用npm start启动项目，npm run build打包的生产环境会自动移除Profiler相关代码。
• 检查React DevTools版本：安装最新版的浏览器扩展或桌面版React DevTools，旧版本可能与当前React版本不兼容，导致无法捕获数据。
• 录制过程中必须触发组件更新：Profiler只记录组件渲染/更新的活动，录制时需要执行能触发状态变化的操作（比如点击按钮、切换路由、加载数据），静态页面无操作不会产生数据。
• 确认React DevTools的Profiler功能未被禁用：打开React DevTools的设置面板，检查“Profiler”选项是否处于开启状态。
• 验证React版本：Profiler从React 16.3开始支持，执行npm list react查看项目React版本，若低于16.3需升级。
• 排除第三方插件干扰：浏览器的广告拦截、隐私保护类插件可能阻断React DevTools与应用的通信，尝试禁用这类插件后重新录制。

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