Lighthouse生成报告时为什么显示“加载失败”?
在用Chrome开发者工具运行Lighthouse做PWA测试时,点击生成报告总会弹出“加载失败”的红色错误提示。我试过重启浏览器、清除缓存,甚至重装Chrome,但问题依旧。控制台没报错,其他页面却能正常生成报告,这是怎么回事?
错误提示截图里写着:Report generation failed: Could not generate trace。我用的命令是这样写的:
{
"audits": {
"performance": {
"details": "Error: Failed to gather trace"
}
}
}
页面是HTTPS的,也开启了服务Worker,配置文件也没问题。难道是第三方库冲突?还是需要特定的HTTP头?
Could not generate trace大部分时候不是页面功能的问题,而是Lighthouse在收集性能追踪数据时被某些行为打断了。你这个情况大概率是页面里有无限循环的 setTimeout 或 setInterval,或者某个长任务一直占着主线程。Lighthouse需要干净的空闲期来分析页面加载,如果一直没等到,trace 就采集失败,直接报错“加载失败”。
尤其是开了 Service Worker 的 PWA 页面,经常有人在开发环境下加了个轮询同步的逻辑,比如每200ms发个请求保活之类的,看着不重,但会阻断页面进入 idle 状态。
解决办法很简单:打开 Performance 面板,录一下页面从加载到静止的全过程。如果看到火焰图密密麻麻根本停不下来,那就说明有长任务或高频定时器在作怪。找到对应的 JS 代码,临时注释掉,再跑 Lighthouse。
另外也可能是 Chrome 扩展干扰,虽然你重装过,但用户数据没清,建议开无痕模式(禁用所有扩展)再试一次。如果无痕下能跑通,那就是某个扩展注入的脚本在捣乱。
最后提醒一点:别信“清除缓存重启就行”这种万金油操作,Lighthouse 跑不起来八成是运行时问题,去查代码更靠谱。