Lighthouse生成报告后内容全是空白怎么办?

Top丶心虹 阅读 29

在用Chrome开发者工具跑Lighthouse评分时,生成的报告页面全是空白,但之前能正常出结果。试过清除浏览器缓存、重启浏览器,甚至重装Chrome都没用。

用控制台看报错显示:Uncaught TypeError: Cannot read properties of undefined (reading 'auditRefs'),但不确定问题出在哪。我的测试配置是这样的:


lighthouse('https://my-app.dev', {
  output: 'html',
  onlyCategories: ['performance'],
  extraHeaders: {
    'X-Requested-With': 'test'
  }
});

有没有遇到过类似情况?怎么排查报告生成失败的原因?

我来解答 赞 6 收藏
二维码
手机扫码查看
1 条解答
Tr° 正浩
遇到过类似情况,问题应该出在Lighthouse插件版本或者配置项改动导致的兼容问题。这个报错 Uncaught TypeError: Cannot read properties of undefined (reading 'auditRefs') 很明确地指向了报告生成阶段某个对象没定义,可能是插件本身没加载完整,也可能是你的配置不兼容。

首先,检查一下你当前Chrome里用的Lighthouse版本。有时候浏览器自动更新之后,插件可能没跟上,或者你本地开发环境用的配置项已经过时了。

你可以试试用命令行跑一遍Lighthouse,看是否还能正常生成报告。命令如下:

npx lighthouse https://my-app.dev --output html --only-categories performance --extra-headers '{"X-Requested-With":"test"}'


如果命令行能正常生成HTML报告,那说明问题就在Chrome开发者工具里的Lighthouse插件。这时候你可以尝试禁用再启用它,或者干脆更新到最新版Chrome。

如果命令行也出问题,那你需要检查你的配置项是否和当前Lighthouse版本兼容。特别是 onlyCategoriesauditRefs 相关的引用是否还有效。

另外,建议你升级一下Lighthouse到最新版,确保所有依赖都对得上:

npm install -g lighthouse


如果不是必须用浏览器插件生成报告,那就用命令行跑,输出HTML文件后直接在浏览器打开看结果。这个方式更稳定,也不容易被浏览器插件问题影响。

总之,先从命令行入手,排除插件问题;再检查版本兼容性,确保配置项符合当前Lighthouse规范。大概率是插件版本和配置项不匹配导致的。
点赞 8
2026-02-04 13:23