无形中提高你工作效率的chrome插件
共 2800字,需浏览 6分钟
·
2020-06-20 23:48
写在前面:本文所有插件的获取方式以及如何安装都写在文末
开发相关拓展插件
1. WEB前端助手(FeHelper
)
FeHelper简直就是前端开发人员的神器,它是由国人开发的一款前端工具集合的小插件,插件功能齐全,基本上涵盖了前端从业者经常会使用到的基础功能,使用起来也很顺手。下面就来感受一下强大的功能:FE支持按需安装,也就是说,上面的这些功能, 你需要什用到什么再安装就行, 下面就挑两个我工作中使用到的:
- json 格式化
![824e337899e5bc9ae2126e4438bec619.webp](https://filescdn.proginn.com/0112c43a8640bba6a6c14279774e2f91/824e337899e5bc9ae2126e4438bec619.webp)
- 页面取色
我们在开发时需要对一些内容进行取色, 很多小伙伴都是打开chrome调试器再使用取色器进行取色。使用FeHelper的取色器更加方便
![a98632c967a47f496cd1d3a17200657b.webp](https://filescdn.proginn.com/d99b6d838c5f57907694fdb68e4d02ac/a98632c967a47f496cd1d3a17200657b.webp)
- JS正则表达式验证
不仅可以生成常用的正则表达式, 也可可以校验表达式是否匹配, 在正则调试过程中可以起到较好地辅助作用
![e199089cdd20ccd8e4251901a7edd18a.webp](https://filescdn.proginn.com/cbe94fceccac6f9ab836c0cd7cacbb79/e199089cdd20ccd8e4251901a7edd18a.webp)
一些前端开发常用的功能都有,方便实用;还有其他好用的功能,你们慢慢去发现吧,这里就不赘述
2. vue-devtools
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,被称为“Vue 调试神奇” vue是数据驱动的, 利用这个插件,这样就能看到vue中每个组件的data、props、computed等多种属性和方法,为我们项目的开发与调试提供了很多的便利 。
![84a0af82c4de5ce0c2ee5cbcc00e0249.webp](https://filescdn.proginn.com/a8592c1e19fe23b87ab1040e9232b9c6/84a0af82c4de5ce0c2ee5cbcc00e0249.webp)
3. React Developer Tools
如果你使用React进行开发,那必不可少的就是React Developer Tools
, 它是Fecebook出品的,同样使用 React Developer Tools
进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示
![3a95397f729d0caef42b5d7740699a7b.webp](https://filescdn.proginn.com/81ec5b26c4bfa367673dadfb6341177a/3a95397f729d0caef42b5d7740699a7b.webp)
4. Postman
Postman 插件可以复用浏览器的Cookie,更加方便测试。不论你是做后端开发还是客户端开发,Postman都是测试HTTP接口的必备利器,支持集成测试;还可以将测试请求分组,然后批量执行。
![42eba7072b51902f71864e7a34472d02.webp](https://filescdn.proginn.com/dc8bd5553c3291008a6757ce222c4292/42eba7072b51902f71864e7a34472d02.webp)
5. Octotree
在GitHub边侧栏上显示代码树。非常适合查看项目源代码,无需将代码库clone到编辑器就可以如同在编辑器中操作一样, 可以直接搜索文件跳转。
![d13ae52ca0b569c7abad8623226bbe49.webp](https://filescdn.proginn.com/ca927a425bcb972d8a5e7f999f2de67a/d13ae52ca0b569c7abad8623226bbe49.webp)
6. Lighthouse 前端性能优化测试工具
在前端开发中,对于自己开发的app或者web page性能的好坏,一直是让前端开发很在意的话题。我们需要专业的网站测试工具,让我们知道自己的网页还有哪些需要更为优化的方面,我是使用过的一款工具:Lighthouse ,感觉还不错,记录下来,也顺便分享给用得着的伙伴。
![42e151b59e62dd0824a6acb674a2b62b.webp](https://filescdn.proginn.com/bee0694663ac21217811b4b1e6070a74/42e151b59e62dd0824a6acb674a2b62b.webp)
lighthouse 插件会对网页的各个测试项的结果打分,并给出优化建议报告,是一个非常实用的可视化网站优化工具。
7. Clear Cache
clear cache通过单击一个按钮清除缓存和浏览数据。使用此扩展快速清除缓存,无需任何确认对话框,弹出窗口或其他烦恼。点击图标即可清除缓存、cookie等,开发必备! 可以根据需要清除的数据定制ClearCache,这些数据包括应用缓存,Cookie,下载,文件系统,表单数据,历史记录,索引数据库,本地存储,插件数据,密码和WebSQL等。
![a792645fb02981e043147e307e60b641.webp](https://filescdn.proginn.com/dc24ea12b888e9c815cf7b1dc99a9036/a792645fb02981e043147e307e60b641.webp)
8. Vimium
Vimium 则继承了 Vim 中的常用键位,让你在使用 Chrome 的过程中,无论是浏览网页、切换标签或是其它任何操作,全都可以只通过键盘完成。想像一下,你再也不需要移动鼠标去打开一个链接,手指不用离开键盘,一切都是这么流畅。
![34900f9836ae5b723becfbc8a9d9cf5d.webp](https://filescdn.proginn.com/dd7fa5261e8c1ac680ad1aea76700a27/34900f9836ae5b723becfbc8a9d9cf5d.webp)
9. Save All Resources
当我们在网页上看到炫酷的动画效果,一个很自然的想法就是F12, 然后下载资源,但是在chrome开发者工具中Source是找到当前页面所使用的资源,而我们希望可以直接一键下载所有网页资源,并且可以保持目录结构。
一键下载网页资源(Save All Resources),可以完美的满足我们的需求
10. Wappalyzer
展示你访问的网页由什么技术栈所构建,准确率还是不错的,方便分析其他网站
![666fdfc22664315b19182f404e6ca14a.webp](https://filescdn.proginn.com/75afda4446bdb2f4f6fd29b51bae96f8/666fdfc22664315b19182f404e6ca14a.webp)
日常高频使用(非开发类)
1. 谷歌上网助手_GHelper
很多时候用户想浏览一些国外的网站查阅一些资料,但是国内的网络环境难以通过, 所以我们给大家介绍过各种上网助手、访问助手等。今天给大家带来的是谷歌上网助手的另一个版本——开发版(Ghelper)。免费使用,它拥有十二万的高用户数,简洁明了,上手方便!
![bec00ed71fae74a151601c03400fdfd1.webp](https://filescdn.proginn.com/6958950059d6d7b2b69721554913c022/bec00ed71fae74a151601c03400fdfd1.webp)
2. SimilarWeb
对于网站开发者来说,除了网站本身的代码设计与开发,网站的各种用户访问数据与流量分析也是很重要的一块工作。SimilarWeb 这款 Chrome 插件能够帮你统计网站的流量来源与排名,查询网站参与等各种网站信息。
![30e81881ec791d1da776a274b984c566.webp](https://filescdn.proginn.com/4615e068d12555147cca7caf72bc7dc9/30e81881ec791d1da776a274b984c566.webp)
3. Advertising Terminator
广告终结者(Advertising Terminator)是你唯一需要的必备广告过滤扩展。广告终结者可以清除几乎所有的网络广告样式,包括购物广告、浮动广告、视频广告、恶意弹窗、网络跟踪等...
![9bb4309a8513161da0335b414e55e081.webp](https://filescdn.proginn.com/6d6c75e9df1d73283f92d476eeef4c7b/9bb4309a8513161da0335b414e55e081.webp)
4. Infinity 新标签页
最后要给大家安利的就是Infinity,功能强大的新建标签页扩展!做的界面很美,每日壁纸质量也很高!有同步笔记、代办事项等,同时,喜欢它的网页图标,提供了很多常用网站的图标,自定义书签时很好看~唯一的缺点,就是感觉启动比较慢~
![385e9878880f15e3f57e427d5264d08c.webp](https://filescdn.proginn.com/12ff48c0c7ae2891cf0da4cd5eb4ffce/385e9878880f15e3f57e427d5264d08c.webp)
5. 新媒体管家——帐号管理&图文编辑
顾名思义,新媒体管家的主要功能是管理你的新媒体帐号,目前支持以下平台:
![1bc30557ca186253d9b06afbc45c5d36.webp](https://filescdn.proginn.com/53ba6aeba7c47010c75d2a187447d078/1bc30557ca186253d9b06afbc45c5d36.webp)
可以让你同时管理几个平台的帐号,或一个平台上的多个帐号。添加帐号之后,就可以通过新媒体管家进入相应的帐号了。比如,对于微信公众平台来说,你可以添加多个帐号,并且同时登陆,一天之内只需要扫码登录一次,便可以直接进入后台。
新媒体管家还有一个非常有用的功能就是采集素材, 当你看到心仪的素材,点击一下采集,就可以存入自己采集的素材库,随时想用都可以。
6. Extension Manager 扩展管理器
给大家安利了这么多插件, 为了方便管理和使用最后再推荐一个Extension Manager
, 你可以用它来对你安装的插件进行分组管理;还可以快速的切换插件的开启与关闭,你可以配置排序规则, 根据你的使用评率来排序这些插件。
![1e6b7a038f54b913678f4294654ab95a.webp](https://filescdn.proginn.com/0a80b75021a90082574e6ece14bf9452/1e6b7a038f54b913678f4294654ab95a.webp)
获取及安装
文中提到的插件,我都已经为大家下载好了,关注公众号【程序员成长指北】回复:插件,就可以领取全部已下载好的安装包.
正常安装
- 首先在标签页输入【chrome://extensions/】进入chrome扩展程序
- 解压你在本站下载的插件,并拖入扩展程序页即可。
安装出现程序包无效CRX-HEADER-INVALID的解决方案, 参照:Chrome插件安装时出现"CRX-HEADER-INVALID"解决方法。安装好后即可使用。
推荐大家使用chrome应用商店进行安装,因为我文中已经推荐了谷歌上网助手