推荐前端开发必备的chrome插件
所谓“工欲善其事,必先利其器”,想要提高自己的前端开发工作效率,除了有一个好的前端开发工具,一些前端开发必备的chrome 插件也是必不可少的,有了这些 chrome 插件可以让我们的工作达到事半功倍的效果,虽然之前写过一篇关于这方面的文章,但是还不全面,可以看这篇《推荐几个适合开发者使用的 Chrome 插件 我个人也在用》,接下来码云笔记就就继续为大家分享前端开发常用的 chrome 插件。
开发相关插件
1. WEB 前端助手(FeHelper)
FeHelper 简直就是前端开发人员的神器,它是由国人开发的一款前端工具集合的小插件,插件功能齐全,基本上涵盖了前端从业者经常会使用到的基础功能,使用起来也很顺手。目前包括 JSON 自动/手动格式化、JSON 内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片 Base64 编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工具,甚至在目前新版本的 FeHelper 中,还集成了 FH 开发者工具, 如果你也想自己搞一个工具集成到 FeHelper 中,那这一定能满足到你。下面就来感受一下强大的功能:
上图可以看到,一些前端开发常用的功能都有,方便实用;还有其他好用的功能,你们慢慢去发现吧,这里就不赘述。
2. vue-devtools
vue-devtools 是一款基于 chrome 游览器的插件,用于调试 vue 应用,被称为“Vue 调试神奇” vue 是数据驱动的, 利用这个插件,这样就能看到 vue 中每个组件的 data、props、computed 等多种属性和方法,为我们项目的开发与调试提供了很多的便利 。
3.React Developer Tools
如果你使用 React 进行开发,那必不可少的就是 React Developer Tools, 它是 Fecebook 出品的,同样使用 React Developer Tools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示
4. Postman
Postman 插件可以复用浏览器的 Cookie,更加方便测试。不论你是做后端开发还是客户端开发,Postman 都是测试 HTTP 接口的必备利器,支持集成测试;还可以将测试请求分组,然后批量执行。
Postman 重要提示:
由于 2018 年初 chrome 停止对 chrome 应用程序的支持,你的 postman 插件可能无法正常使用了。目前 chrome 应用商店能使用的就是 chrome 扩展程序和主题背景。
如果你还想用 postman,那么可以使用下面官方推出的 Postman 开发者版本。
官方下载地址:点击一下
5. Octotree
在 GitHub 边侧栏上显示代码树。非常适合查看项目源代码,无需将代码库 clone 到编辑器就可以如同在编辑器中操作一样, 可以直接搜索文件跳转。
6.Lighthouse 前端性能优化测试工具
在前端开发中,对于自己开发的 app 或者 web page 性能的好坏,一直是让前端开发很在意的话题。我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,我是使用过的一款工具:Lighthouse,感觉还不错,记录下来,也顺便分享给用得着的伙伴。
Lighthouse 分析 web 应用程序和 web 页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验。
6.1 在 chrome 开发者工具中使用 lighthouse
Lighthouse 是直接集成到 chrome 开发者工具中的,位于‘Audits’面板下。
首先,你得下载安装 了 chrome 浏览器,相信每个做开发的人员都应该拥有 chrome 浏览器。
其次,在 chrome 浏览器中打开你需要测试的网站,按 f12 进入开发者调试模式,点击‘Audits’选项,看到如下界面:
然后点击“Run audits”,之后就是等待生成评估界面。
6.2 使用 Node Cli
lighthouse 依赖 node 8 或者更高的 node 版本
首先全局安装 lighthouse:
npm install -g lighthouse # or use yarn: # yarn global add lighthouse
然后在终端输入命令,我使用的是博客园首页地址
$ lighthouse https://mybj123.com/
lighthouse 插件会对网页的各个测试项的结果打分,并给出优化建议报告,是一个非常实用的可视化网站优化工具。
7. Clear Cache
clear cache 通过单击一个按钮清除缓存和浏览数据。使用此扩展快速清除缓存,无需任何确认对话框,弹出窗口或其他烦恼。点击图标即可清除缓存、cookie 等,开发必备!可以根据需要清除的数据定制 ClearCache,这些数据包括应用缓存,Cookie,下载,文件系统,表单数据,历史记录,索引数据库,本地存储,插件数据,密码和 WebSQL 等。
clear cache 注意事项
- 清除缓存有可能清除浏览器内存中大量的信息。用户名和密码等信息清空缓存后可能会消失。请事先保存。
- 访问网站下载过的内容也保存在缓存中,所以清除缓存后如果你第一次访问你喜欢的网站时时,加载速度可能会较慢。
8. Vimium
Vimium 则继承了 Vim 中的常用键位,让你在使用 Chrome 的过程中,无论是浏览网页、切换标签或是其它任何操作,全都可以只通过键盘完成。想像一下,你再也不需要移动鼠标去打开一个链接,手指不用离开键盘,一切都是这么流畅。(只做推荐)
9. Save All Resources
当我们在网页上看到炫酷的动画效果,一个很自然的想法就是 F12,然后下载资源,但是在 chrome 开发者工具中 Source 是找到当前页面所使用的资源,而我们希望可以直接一键下载所有网页资源,并且可以保持目录结构。
一键下载网页资源(Save All Resources),可以完美的满足我们的需求
获取及安装
文中提到的插件,码云笔记都已经为大家下载好了,侧栏游下载地址,直接就可以领取全部已下载好的安装包.
正常安装
- 首先在标签页输入【chrome://extensions/】进入 chrome 扩展程序
- 解压你在本站下载的插件,并拖入扩展程序页即可。
注意:
为避免有人恶意下载,请下单用户在 2 天内下载使用,超出有效期需重新下单!
如已下单用户超出 2 天后仍未下载,需联系客服并提供付款截图。
码云笔记 » 推荐前端开发必备的chrome插件