一、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/

Google 的Web开发相关工具的更多相关文章

  1. Web开发与设计之Google兵器谱-Web开发与设计利器

    Web开发与设计之Google兵器谱-Web开发与设计利器 博客分类: Java综合 WebGoogleAjaxChromeGWT 笔者是个Java爱好者也是用Java进行web开发的工作者.平时笔者 ...

  2. Web开发相关工具收集

    FireFox相关: FireBug/GreaseMonkey/Yslow/WebDeveloperSelenium:Web应用程序测试的工具--  http://seleniumhq.org/  h ...

  3. web开发相关工具总结

    系统: linux -ssh工具:secureCRT ,PUTTY,XSHELL MYSQl: mysql客户端 ,mysqlworkbench, navicat for mysql ,phpmyad ...

  4. 作为Web开发人员,我为什么喜欢Google Chrome浏览器

    来源: http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 在Google Chrome浏览器出来之前,我一直使用FireF ...

  5. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  6. Facebook的Web开发三板斧:React.js、Relay和GraphQL

    2015-02-26 孙镜涛  InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...

  7. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  8. Meteor+AngularJS:超快速Web开发

        为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化:     三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但 ...

  9. 2016 Web开发资源工具大搜罗

    来源于:https://zhuanlan.zhihu.com/p/22730771 作者:余博伦链接:https://zhuanlan.zhihu.com/p/22730771来源:知乎著作权归作者所 ...

随机推荐

  1. 35.百度云语音识别接口使用及PyAudio语音识别模块安装

    百度云语音识别接口使用: 百度云语音识别接口文档:https://cloud.baidu.com/doc/SPEECH/ASR-API.html#JSON.E6.96.B9.E5.BC.8F.E4.B ...

  2. python基础关键词触发的魔法方法

    with: __enter__ __exit__ dic={} 获取容器中指定元素的行为 dic["name"] = "egon" #设置值 __setitem ...

  3. jupyter notebook 常用快捷操作

    Shift-Enter 执行当前cell,并自动跳到下一个cell Ctrl-Enter 执行当前cell,执行后不自动调转到下一个cell DD 删除当前的cell L 为当前的cell加入line ...

  4. springboot集成mongoDB简易使用

    1.首先是添加Spring Data mongo的配置依赖 <dependency> <groupId>org.springframework.boot</groupId ...

  5. redis单机连接池

    一.配置文件 1. db.properties配置文件#IP地址 redis.ip = 127.0.0.1 #端口号 redis.port= #最大连接数 redis.max.total= #最大空闲 ...

  6. css走马灯,一步一停(专家介绍类型)

    <div class="CON--cen-pd3 clear aniview slow" data-av-animation="fadeIn"> & ...

  7. html跑马灯/走马灯效果

    实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: ...

  8. java 缓存

    外存: 也就是我们经常说的(CDEF盘的大小)外储存器是指除计算机内存及CPU缓存以外的储存器,此类储存器一般断电后仍然能保存数据.常见的外存储器有硬盘.软盘.光盘.U盘等,一般的软件都是安装在外存中 ...

  9. k8s之helm入门

    1.概述 helm是k8s的另外一个项目,相当于linux的yum,在yum仓库中,yum不光要解决包之间的依赖关系,还要提供具体的程序包,helm仓库里面只有配置清单文件,而没有镜像,镜像还是由镜像 ...

  10. 【温故知新】php 魔术方法

    <?php class Magic{ private $name; /** *构造方法,在类被实例化时自动调用,一般用于初始化操作 */ public function __construct( ...