Google 的Web开发相关工具

一、PageSpeed Insights

PageSpeed Insights 能够针对移动设备和桌面设备生成网页的实际性能报告，并能够提供关于如何改进相应网页的建议。

在线工具：https://developers.google.cn/speed/pagespeed/insights/

二、Chrome 开发者工具

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。

使用文档：https://developers.google.cn/web/tools/chrome-devtools/

三、使用 Lighthouse 审查网络应用

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。

使用文档：https://developers.google.cn/web/tools/lighthouse/

四、Putteteer

您可以在浏览器中手动执行的大多数操作都可以使用Puppeteer完成！以下是一些可以帮助您入门的示例：

• 生成页面的屏幕截图和PDF。
• 抓取SPA并生成预渲染内容（即“SSR”）。
• 自动化表单提交，UI测试，键盘输入等。
• 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
• 捕获站点的时间线跟踪，以帮助诊断性能问题。
• 测试Chrome扩展程序。

使用文档：https://developers.google.cn/web/tools/puppeteer/

五、Workbox

JavaScript库，用于为Web应用程序添加离线支持，Workbox是一组库和节点模块，可以轻松缓存资产并充分利用用于构建Progressive Web Apps的功能。

为何选择Workbox？

Workbox是一个库，它结合了一组最佳实践，并删除了每个开发人员在与服务工作者一起工作时编写的样板文件。

• 预缓存
• 运行时缓存
• 策略
• 请求路由
• 背景同步
• 有用的调试
• 比sw-precache和sw-toolbox具有更大的灵活性和功能集

使用文档：https://developers.google.cn/web/tools/workbox/