前端开发必备的chrome插件(上)

4,856 阅读4分钟

从二十世纪末到如今,我们已然进入了信息时代,而互联网充当最重要的一环,其蓬勃发展也促进了浏览器厂商的竞争,从远古时代网景公司的导航者浏览器(那时候也叫网上冲浪) => IE => Fixfore 、Safari => chrome,到如今全球范围内来看,得益于其优越的chromium内核、js引擎v8、丰富的插件机制等,chrome浏览器无疑占据了半壁江山。


以下数据来至 statcounter

2019年2月-2020年2月全球范围内chrome达到了恐怖的64.45%

在国内,也达到了58.61%

同时也是前端开发人员最常用的浏览器,没有之一 !


下面分享几个常用的谷歌插件:

  1. Ghelper
    正所谓工欲善其事必先利其器,若想安装谷歌插件,首先你得能上谷歌应用商店才行,但鉴于国内环境,是不能直接访问谷歌的,所以可以先上 Ghelper 下载压缩包,解压后里面有安装说明,按文档说明操作就可以了。

    官网介绍:Ghelper是专门为科研、外贸、跨境电商、海淘人员、开发人员服务的上网加速工具,chrome内核浏览器专用!可以解决chrome扩展无法自动更新的问题,同时可以访问谷歌google搜索,gmail邮箱,google+等谷歌产品。

  2. WhatRuns
    查看网站背后使用的那些第三方服务和技术,包括网站内容、框架、分析工具、wordpress插件、字体等,比如:

  3. OneTab
    Chrome每个标签都是一个独立进程,耗费大量内存,让你的电脑不断变慢,而安装OneTab能为您节省高达95%的内存,并减轻标签页混乱现象。 安装OneTab后,只需点击一下扩展图标,OneTab就会将你打开的标签聚合在一起,成为一个列表,相当于只打开一个标签,要是想找回可以直接去列表中单独恢复或全部恢复,除此之后,还支持分类归档,自定义组名,有效提高使用效率。

  4. FeHelper(前端助手)
    强烈推荐,功能太多了,前端开发的工具集,包含了JSON自动格式化、手动格式化,支持排序、解码、下载等功能,可以在配置页选择性安装需要的功能,全部功能见下图:

  5. Extension Manager(扩展管理器)
    一款快速管理插件的插件。当插件安装多了之后,每次要管理插件都需要先在点击更多设置,再点击扩展程序,然后才会新开一个管理插件的页面,很不方便,而这款插件能一键管理所有插件,快速开启/禁用、批量闪电管理,智能排序,右键卸载、锁定、选项配置,角标提醒,大小布局随心配,快捷、简单、安全,附上截图:

  6. 沙拉查词
    个人用过的最好用的翻译插件。 官方介绍:Saladict 沙拉查词是一款专业划词翻译扩展,为交叉阅读而生。大量权威词典涵盖中英日韩法德西语,支持复杂的划词操作、网页翻译、生词本与 PDF 浏览。

  7. Vue.js devtools、React Developer Tools
    作为前端三大框架之二,vue和react的调试插件,几乎有用这两个框架的都会安装,不多解释。 但如果vue没用构建工具,直接用script标签引进的,此时若引进压缩版会显示不出这个调试工具。

  8. ReRes 线上调试神器,前端开发过程中,经常会有需要对远程环境调试的需求。比如,修改线上bug,开发环境不在本地等等。此时就可以通过ReRes把远程css文件或者js映射到本地的文件上,通过修改本地文件进行调试和开发。 官方介绍:可以用来更改页面请求响应的内容。通过指定规则,您可以把请求映射到其他的url,也可以映射到本机的文件或者目录。支持单个url映射,也支持目录映射。 注:安装后,需要在扩展程序管理中把勾“允许访问文件网址”勾选上。

  9. 掘金
    安装后,打开新标签页就是插件显示的内容聚合页,包括掘金热门文章和github热门项目等,可切换语言、领域查看。

  10. WhatFont
    有时候想看快速查看页面上的字体字号,都得F12选中元素再查看,十分麻烦,而这款插件可快速查看页面上使用的字体信息,包括字体、行高、颜色等,安装后点击一下扩展,然后划出想查询的文字即可,使用截图如下: