内容简介:这次谷歌开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ,分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具,用于改进网络应用质量。您只需要提供网址,它就测试该页面,並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。Lighthouse 重视用户的首次加载页面速度,页面首次显示内容速度,有意义的内容显示速度,以及可以交互的时间。以一个页面加载的周期为例,首先页面会发送第一个字节给用户,然后显示一些非空白
这次谷歌开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ,分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具,用于改进网络应用质量。您只需要提供网址,它就测试该页面,並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。
Lighthouse 重视用户的首次加载页面速度,页面首次显示内容速度,有意义的内容显示速度,以及可以交互的时间。
以一个页面加载的周期为例,首先页面会发送第一个字节给用户,然后显示一些非空白的图像,然后显示有意义的内容,然后展示所有内容,允许用户点击或其他操作,然后完结整个加载周期。
使用方法
运行 Lighthouse 的方式有两种:作为 Chrome 扩展程序运行,或作为命令行 工具 运行。Chrome 扩展程序提供了用户友好的界面,方便读取报告。而命令行工具允许您将 Lighthouse 集成到持续集成系统。
开发者工具
你只需要打开 Chrome 的开发者工具,点击 Audits
,然后就可以看到 Lighthouse 界面:
扩展程序
你可以到chrome web store 下载並安装 Lighthouse Chrome 扩展程序。
命令行工具
需求:Node.js >= 5
- 全局安装 lighthouse
npm install -g lighthouse 复制代码
- 然后输入你的页面
lighthouse https://example.com 复制代码
lighthouse 会自动生成 HTML 报告,你也可以使用 JSON 格式。
自动化部分
你也可以利用 TravisCI 来自动分析改动后的代码对于页面性能的影响。
你只需要在 .travis.yml
里面加入以下代码:
language: node_js script: - npm run lint - npm run build after_success: - ."./travis/deploy_pr_gae.sh" - export LH_MIN_PASS_SCORE=96 - export LH_TEST_URL=https://your.staging.server.com/ - node travis/runlighthouse.js $LH_TEST_URL $LH_MIN_PASS_SCORE 复制代码
更多详情可以观看讲师在 Github 上面的分享: ebidel/lighthouse-ci
Puppeteer
底层
在谈 Puppeteer 之前,我们需要提到上面是 Headless Chrome
。简单来说,它是一个没有视图层的谷歌浏览器。
它允许你使用最新的浏览器来测试页面,使用所有最新的属性,比如说 CSS Grid 格局,Web 推送通知等。
最重要的是,它暴露开发者工具的可编程接口,比如说网络状况,模拟设备,代码覆盖率。
例如你可以打开一个 WebSocket,然后监听浏览器发生了什么操作,比如说 CSS 的 getStyleSheetText
,DOM 的 markUndoableState
等。
你也可以到官网阅读更加丰富的文档: chromedevtools.github.io/devtools-pr…
实战部分
大部分你手动在浏览器里面做的事情,它都可以做到。例如:
- 截图並生成 PDF
- 自动填写表格,UI 测试,键盘输入
- 测试 Chrome 插件
安装方法
它会下载最新版本的 Chromium,以及暴露封装好的接口出来给开发者使用。
值得注意的是,它的源码有很多 async/await
的操作,你也可以这样操作你的代码。
npm i puppeteer --save 复制代码
讲师也提供了很多例子,方便学习使用 Puppeteer。
截屏
比如说我要把 https://example.com
页面截图,保存为 example.png
。我只需要写几行代码 :
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://example.com'); await page.screenshot({path: 'example.png'}); await browser.close(); })(); 复制代码
页面数据
你只需要使用 page.metrics()
方法就可以了,它会返回一个页面数据对象。
代码覆盖率
你可以使用 page.coverage
里面的方法 startJSCoverage()
, startCSSCoverage()
来开始测试覆盖率。以及使用 stopJSCoverage()
, stopCSSCoverage()
来结束测试。
拦截网络请求
你可以拦截图片的请求,甚至是把图片的请求换成其他请求,例如 http 直接上 https,或图片换成占位图。
生成报告
你可以通过代码生成 PDF,例如使用 page.pdf()
方法。
PPTRAAS
以上这些个案都是一些重复出现的日常例子。 Puppeteer as a service ]就把以上这些代码做了封装,只需在 url 后续加入 url
参数,便可使用服务。
例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/
来截图。
更多例子可以到 Puppeteer as a service 来使用服务。
其他优质的工具
Node Debugger 可以让你打开浏览器里面的开发者工具来调试 Node 程序。
Page Speed Insights 可以让你透过谷歌的平台来测试里的网站,並生成报告。
以上所述就是小编给大家介绍的《网页开发工具: Lighthouse, Puppeteer 及其之上丨 Google 开发者大会 2018》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 用 Go 开发接口服务--环境搭建和开发工具选择
- 6款支持敏捷开发的项目管理工具,助力开发者驶入开发快车道
- [官方] 在 VSCode 里直接使用 SSH 连接远程开发 - 开发工具
- Rust 2018开发环境配置与开发效率工具集
- 开发工具分享
- 谷歌开发工具文档
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML5秘籍(第2版)
[美] Matthew MacDonald / 李松峰、朱巍、刘帅 / 人民邮电出版社 / 2015-4 / 89.00元
不依赖插件添加音频和视频,构建适用于所有浏览器的播放页面。 用Canvas创建吸引人的视觉效果,绘制图形、图像、文本,播放动画,运行交互游戏。 用CSS3将页面变活泼,比如添加新奇的字体,利用变换和动画添加吸引人的效果。 设计更出色的Web表单,利用HTML5新增的表单元素更加高效地收集访客信息。 一次开发,多平台运行,实现响应式设计,创建适配桌面计算机、平板电脑和智能手机......一起来看看 《HTML5秘籍(第2版)》 这本书的介绍吧!