web性能检测工具lighthouse

最新推荐文章于 2025-01-08 17:35:55 发布

2401_84562251

最新推荐文章于 2025-01-08 17:35:55 发布

阅读量438

点赞数 5

文章标签：单元测试功能测试学习

本文链接：https://blog.csdn.net/2401_84562251/article/details/138984556

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

作为浏览器插件，访问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模式。