Lighthouse生成报告后内容全是空白怎么办?
在用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'
}
});
有没有遇到过类似情况?怎么排查报告生成失败的原因?
Uncaught TypeError: Cannot read properties of undefined (reading 'auditRefs')很明确地指向了报告生成阶段某个对象没定义,可能是插件本身没加载完整,也可能是你的配置不兼容。首先,检查一下你当前Chrome里用的Lighthouse版本。有时候浏览器自动更新之后,插件可能没跟上,或者你本地开发环境用的配置项已经过时了。
你可以试试用命令行跑一遍Lighthouse,看是否还能正常生成报告。命令如下:
如果命令行能正常生成HTML报告,那说明问题就在Chrome开发者工具里的Lighthouse插件。这时候你可以尝试禁用再启用它,或者干脆更新到最新版Chrome。
如果命令行也出问题,那你需要检查你的配置项是否和当前Lighthouse版本兼容。特别是
onlyCategories和auditRefs相关的引用是否还有效。另外,建议你升级一下Lighthouse到最新版,确保所有依赖都对得上:
如果不是必须用浏览器插件生成报告,那就用命令行跑,输出HTML文件后直接在浏览器打开看结果。这个方式更稳定,也不容易被浏览器插件问题影响。
总之,先从命令行入手,排除插件问题;再检查版本兼容性,确保配置项符合当前Lighthouse规范。大概率是插件版本和配置项不匹配导致的。