web性能检测工具lighthouse

最新推荐文章于 2025-10-25 22:29:28 发布

原创最新推荐文章于 2025-10-25 22:29:28 发布 · 575 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #压力测试 #单元测试 #软件测试 #功能测试 #自动化测试 #程序人生

软件测试专栏收录该内容

909 篇文章

订阅专栏

软件测试资料领取：[内部资源] 想拿年薪40W+的软件测试人员，这份资料必须领取~

软件测试面试刷题工具：软件测试面试刷题【800道面试题+答案免费刷】

About Automated auditing, performance metrics, and best practices for the web.

Lighthouse 可以自动检查Web页面的性能。

你可以以多种方式使用它。

浏览器插件

作为浏览器插件，访问chrome网上商店搜索Lighthouse 插件安装。以两种方式使用。

方式一

安装成功后，访问想要检查的页面，开发插件，点击Generate report，稍等片刻，你将会得到一份页面的检查报告。

方式二

访问想要检查的页面，打开开发者工具，切换到Lighthouse 标签使用。

Node CLI

以Node CLI方式使用Lighthouse可以得到最大灵活性，Lighthouse提供了许多参数使用。

Linghthouse 需要Node 14 LTS（14.x）或更高版本。

安装

> npm install -g lighthouse

查看帮助

> lighthouse --help

使用

> lighthouse https://www.baidu.com --output html --output-path ./report.html
√ We're constantly trying to improve Lighthouse and its reliability.
...

--output 指定报告的类型；--output-path 指定报告的路径。

以编程模式使用

创建lighthouse_demo.js 文件，脚本如下：

const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
  const runnerResult = await lighthouse('https://www.baidu.com/', options);

  // `.report` is the HTML report as a string
  const reportHtml = runnerResult.report;
  fs.writeFileSync('lhreport.html', reportHtml);

  // `.lhr` is the Lighthouse Result as a JS object
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

  await chrome.kill();
})();

有没有自动化既视感，还可以设置 headless模式。