Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lighthouse 的使用 #29

Open
wengjq opened this issue Nov 12, 2019 · 0 comments
Open

Lighthouse 的使用 #29

wengjq opened this issue Nov 12, 2019 · 0 comments

Comments

@wengjq
Copy link
Owner

wengjq commented Nov 12, 2019

前言

Lighthouse 是一个开源的自动化工具,用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 为 Lighthouse 提供一个审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。目前测试项包括页面性能、PWA、可访问性(无障碍)、最佳实践、SEO。Lighthouse 会对各个测试项的结果打分,并给出优化建议,这些打分标准和优化建议可以视为 Google 的网页最佳实践。

使用入门

运行 Lighthouse 的方式有两种:

  • 作为 Chrome 扩展程序运行
  • 作为命令行工具运行。

Chrome 扩展程序提供了一个对用户更友好的界面,方便读取报告。命令行工具允许您将 Lighthouse 集成到持续集成系统。

1、下载 Google Chrome 52 或更高版本。

2、安装 Lighthouse Chrome 扩展程序。转到您要进行审查的页面。

3、点击位于 Chrome 工具栏上的 Lighthouse 图标 (Lighthouse 图标)。

企业微信截图_1573537570838

4、Lighthouse 菜单。如果您想仅运行审查的子集,则点击 Options 按钮并停用您不关注的审查。 向下滚动并按 OK 以确认您的更改。

企业微信截图_15735379789828

5、Lighthouse 选项菜单。点击 Generate report 按钮以针对当前打开的页面运行 Lighthouse 测试。在完成审查后,Lighthouse 将打开一个新标签,并在页面的结果上显示一个报告。

Lighthouse 报告

企业微信截图_15735411976167

命令行工具

安装 Node,需要版本 5 或更高版本。安装 Lighthouse 作为一个全局节点模块。

npm install -g lighthouse

针对一个页面运行 Lighthouse 审查。

lighthouse https://airhorner.com/

传递 --help 标志以查看可用的输入和输出选项。

lighthouse --help
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant