推荐前端开发必备的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 注意事项

1. 清除缓存有可能清除浏览器内存中大量的信息。用户名和密码等信息清空缓存后可能会消失。请事先保存。
2. 访问网站下载过的内容也保存在缓存中，所以清除缓存后如果你第一次访问你喜欢的网站时时，加载速度可能会较慢。

8. Vimium

Vimium 则继承了 Vim 中的常用键位，让你在使用 Chrome 的过程中，无论是浏览网页、切换标签或是其它任何操作，全都可以只通过键盘完成。想像一下，你再也不需要移动鼠标去打开一个链接，手指不用离开键盘，一切都是这么流畅。(只做推荐)

9. Save All Resources

当我们在网页上看到炫酷的动画效果，一个很自然的想法就是 F12，然后下载资源，但是在 chrome 开发者工具中 Source 是找到当前页面所使用的资源，而我们希望可以直接一键下载所有网页资源，并且可以保持目录结构。

一键下载网页资源(Save All Resources)，可以完美的满足我们的需求

获取及安装

文中提到的插件，码云笔记都已经为大家下载好了，侧栏游下载地址，直接就可以领取全部已下载好的安装包.

正常安装

1. 首先在标签页输入【chrome://extensions/】进入 chrome 扩展程序
2. 解压你在本站下载的插件，并拖入扩展程序页即可。

注意：

为避免有人恶意下载，请下单用户在 2 天内下载使用，超出有效期需重新下单！

如已下单用户超出 2 天后仍未下载，需联系客服并提供付款截图。