Chrome/Electron DevTools性能面板无数据？React Electron应用启动卡顿排查遇阻

这种情况我之前排查Electron性能问题时也碰到过，结合你的描述，大概率是下面几个原因导致的：

1. 短时间内生成的性能事件过载 #

你提到录制进度条填充速度极快，说明应用卡顿期间正在疯狂触发各类性能事件——比如React组件的高频重渲染、DOM的频繁变更、Electron的IPC消息风暴，或者是大量的日志输出。哪怕只录了1秒，生成的原始数据量可能抵得上正常应用几分钟的录制量。DevTools的性能面板在解析这种超大规模数据时，会因为CPU和内存瓶颈陷入阻塞，甚至会主动丢弃部分数据，最后呈现出来就几乎看不到有效内容。

2. 主/渲染进程的性能数据未同步捕获 #

Performance面板默认只捕获当前渲染进程的事件，但如果你的卡顿根源在主进程（比如启动时执行了密集的文件IO、CPU计算，或者不合理的IPC通信），只录渲染进程自然抓不到关键数据。更糟的是，如果主进程已经卡死，渲染进程的DevTools和主进程之间的通信会严重延迟，导致录制的数据包丢失或无法正常解析，最终面板显示空白。

3. DevTools自身被应用抢占资源 #

当应用已经严重卡顿、内存占用飙升时，DevTools作为依赖系统资源的工具（哪怕是Electron的独立进程，资源还是和应用共享的），自身的运行也会受到影响。它在处理录制数据时需要大量CPU和内存，这时候系统资源都被你的应用占满，DevTools只能缓慢处理，甚至因为内存不足直接截断数据，导致面板没有内容展示。

给你几个排查的小技巧： #

• 缩小录制范围：在Performance面板的设置里，取消勾选非必要的选项（比如先关掉Memory、Paint这些项，只保留Main线程和Timings），减少录制的数据量，避免DevTools过载。
• 分开排查主/渲染进程：先打开DevTools的More tools > Performance monitor，实时观察CPU、内存的占用情况，判断卡顿是来自主进程还是渲染进程。如果是主进程，用electron --inspect=9229启动应用，然后在Chrome里打开chrome://inspect连接主进程，单独录制主进程的性能数据。
• 调整录制时机：不要在启动后最卡顿的15秒内录制，等应用稍微稳定（比如2分钟后）再录，或者用代码延迟录制：在应用里加一段setTimeout(() => { /* 手动触发录制 */ }, 30000)，避开启动时的海量初始化事件。
• 先排查内存泄漏：既然内存占用飙升快，先切换到Memory面板，做2-3次堆快照对比，看看有没有大量未回收的React组件、DOM节点或者全局变量，这往往是卡顿的根源，也会影响Performance的正常录制。

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