web性能检测工具lighthouse

发表于:2023-11-08 09:45

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:虫师    来源:博客园

  浏览器插件
  作为浏览器插件,访问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模式。
  运行
  > node lighthouse_demo.js
  最终,会在当前目录下生成 lhreport.html 结果文件。
  以 web page test 为例:
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号