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/
Google 的Web开发相关工具的更多相关文章
- Web开发与设计之Google兵器谱-Web开发与设计利器
Web开发与设计之Google兵器谱-Web开发与设计利器 博客分类: Java综合 WebGoogleAjaxChromeGWT 笔者是个Java爱好者也是用Java进行web开发的工作者.平时笔者 ...
- Web开发相关工具收集
FireFox相关: FireBug/GreaseMonkey/Yslow/WebDeveloperSelenium:Web应用程序测试的工具-- http://seleniumhq.org/ h ...
- web开发相关工具总结
系统: linux -ssh工具:secureCRT ,PUTTY,XSHELL MYSQl: mysql客户端 ,mysqlworkbench, navicat for mysql ,phpmyad ...
- 作为Web开发人员,我为什么喜欢Google Chrome浏览器
来源: http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 在Google Chrome浏览器出来之前,我一直使用FireF ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- 转载:移动web开发规范
本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...
- Meteor+AngularJS:超快速Web开发
为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化: 三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但 ...
- 2016 Web开发资源工具大搜罗
来源于:https://zhuanlan.zhihu.com/p/22730771 作者:余博伦链接:https://zhuanlan.zhihu.com/p/22730771来源:知乎著作权归作者所 ...
随机推荐
- 35.百度云语音识别接口使用及PyAudio语音识别模块安装
百度云语音识别接口使用: 百度云语音识别接口文档:https://cloud.baidu.com/doc/SPEECH/ASR-API.html#JSON.E6.96.B9.E5.BC.8F.E4.B ...
- python基础关键词触发的魔法方法
with: __enter__ __exit__ dic={} 获取容器中指定元素的行为 dic["name"] = "egon" #设置值 __setitem ...
- jupyter notebook 常用快捷操作
Shift-Enter 执行当前cell,并自动跳到下一个cell Ctrl-Enter 执行当前cell,执行后不自动调转到下一个cell DD 删除当前的cell L 为当前的cell加入line ...
- springboot集成mongoDB简易使用
1.首先是添加Spring Data mongo的配置依赖 <dependency> <groupId>org.springframework.boot</groupId ...
- redis单机连接池
一.配置文件 1. db.properties配置文件#IP地址 redis.ip = 127.0.0.1 #端口号 redis.port= #最大连接数 redis.max.total= #最大空闲 ...
- css走马灯,一步一停(专家介绍类型)
<div class="CON--cen-pd3 clear aniview slow" data-av-animation="fadeIn"> & ...
- html跑马灯/走马灯效果
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句,它的效果如下所示: ...
- java 缓存
外存: 也就是我们经常说的(CDEF盘的大小)外储存器是指除计算机内存及CPU缓存以外的储存器,此类储存器一般断电后仍然能保存数据.常见的外存储器有硬盘.软盘.光盘.U盘等,一般的软件都是安装在外存中 ...
- k8s之helm入门
1.概述 helm是k8s的另外一个项目,相当于linux的yum,在yum仓库中,yum不光要解决包之间的依赖关系,还要提供具体的程序包,helm仓库里面只有配置清单文件,而没有镜像,镜像还是由镜像 ...
- 【温故知新】php 魔术方法
<?php class Magic{ private $name; /** *构造方法,在类被实例化时自动调用,一般用于初始化操作 */ public function __construct( ...