这次 Google 开发者大会请来了 Lighthouse 的工程师 - Eric Bidelman ，分享如何简单地使用 Lighthouse, Puppeteer 来自动化我们日常的流程。它是一个开源的自动化工具，用于改进网络应用质量。您只需要提供网址，它就测试该页面，並生成页面性能报告。你看看可以采取哪些措施来改进您的应用。
Lighthouse 重视用户的首次加载页面速度，页面首次显示内容速度，有意义的内容显示速度，以及可以交互的时间。
以一个页面加载的周期为例，首先页面会发送第一个字节给用户，然后显示一些非空白的图像，然后显示有意义的内容，然后展示所有内容，允许用户点击或其他操作，然后完结整个加载周期。
使用方法
运行 Lighthouse 的方式有两种：作为 Chrome 扩展程序运行，或作为命令行工具运行。Chrome 扩展程序提供了用户友好的界面，方便读取报告。而命令行工具允许您将 Lighthouse 集成到持续集成系统。
开发者工具
你只需要打开 Chrome 的开发者工具，点击 Audits，然后就可以看到 Lighthouse 界面：
扩展程序
你可以到 下载並安装 Lighthouse Chrome 扩展程序。
命令行工具
需求：Node.js >= 5
- 全局安装 lighthouse
npm install -g lighthouse复制代码
- 然后输入你的页面
lighthouse https://example.com复制代码
lighthouse 会自动生成 HTML 报告，你也可以使用 JSON 格式。
自动化部分
你也可以利用 TravisCI 来自动分析改动后的代码对于页面性能的影响。
你只需要在 .travis.yml 里面加入以下代码：
language: node_jsscript: - npm run lint - npm run buildafter_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 上面的分享：
Puppeteer
底层
在谈 Puppeteer 之前，我们需要提到上面是 Headless Chrome。简单来说，它是一个没有视图层的谷歌浏览器。
它允许你使用最新的浏览器来测试页面，使用所有最新的属性，比如说 CSS Grid 格局，Web 推送通知等。
最重要的是，它暴露开发者工具的可编程接口，比如说网络状况，模拟设备，代码覆盖率。
例如你可以打开一个 WebSocket，然后监听浏览器发生了什么操作，比如说 CSS 的 getStyleSheetText，DOM 的markUndoableState等。
你也可以到官网阅读更加丰富的文档：
实战部分
大部分你手动在浏览器里面做的事情，它都可以做到。例如：
- 截图並生成 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
以上这些个案都是一些重复出现的日常例子。 ]就把以上这些代码做了封装，只需在 url 后续加入 url 参数，便可使用服务。
例如你可以使用 https://pptraas.com/screenshot?url=https://example.com/ 来截图。
更多例子可以到 来使用服务。
其他优质的工具
Node Debugger 可以让你打开浏览器里面的开发者工具来调试 Node 程序。
Page Speed Insights 可以让你透过谷歌的平台来测试里的网站，並生成报告。
后记
这次可谓干货满满，收获丰富。我之前以为这些工具过于专业，艰涩难懂，没想到只需要按几个按钮，写几行代码，甚至不需要写代码便可以测试自己的网站。
就让我好好地利用这些工具来优化我的吧（笑