前端开发——浏览器插件推荐

文章来自公众号：前端学海

前言

之前的一篇文章：前端开发——在线工具推荐 受到很多童鞋的喜爱，让我发现还是有很多前端开发同学需要工具推荐的，所以今天就推荐一下我在前端开发中用到的谷歌浏览器插件。

谷歌插件需要安装 vpn，如果不会翻墙的话也可以使用 拓展迷 这一类的国内插谷歌插件商店进行插件安装。一定要注意插件商店的来源可靠，避免安装到来路不正的插件，因为可能会携带恶意脚本！

插件

框架调试

React Developer Tools

用于 React 开发的调试器插件。
可以显示 React 的数据流向、state 中的数据状态，支持 React 源码的断点调试，对于 React 的开发调试非常方便。

Vue.js devtools

用于 Vue 开发的调试器插件。
可以在谷歌、火狐浏览器上使用。
通过 Vue.js devtools 数据结构调试工具 可以在浏览器 开发者工具 下调试代码。因为 vue 是数据驱动，所以存在一些在开发调试中查看 DOM 结构不能分析出什么的问题，此时我们下载使用 vue-devtools 插件，就可以通过此工具对数据结构进行解析和调试。

工具类

Wappalyzer

网站技术嗅探工具

可以查看当前网页使用的技术框架、javascript 库、构建工具以及分析工具等，对于你调研其他网站的技术框架、服务构成帮助很大，很方便、实用。

FeHelper

通过名字就知道，这是一个前端助手。

它的功能特别多。如JSON格式化、JSON比对、二维码、信息编解码、代码压缩&美化、页面取色、Markdown、网页截屏、编码设置、正则、Crontab、时间转换、网页性能检测、密码生成器、便签笔记、chrome插件下载等

属于前端工具集合类，神器！

可以将常用的截屏、取色、生成二维码等选项加入右键，直接在页面中右键选择即可直接调用工具，如二维码生成，右键选择后就会将当前页面的链接生成二维码

还可以设置二维码格式，或者切换为解码方式。

ModHeader

HTTP 请求头添加插件

用于在当前网页的请求头上添加新的数据。常用场景为 cookie、灰度分支、语言标记、环境标记等。
是接口对接阶段必不可少的插件。

Lighthouse

前端网站性能评测工具

谷歌官方插件，用来对当前网页的各项性能进行评估，以可视化的图标形式给出各项指标，并给出相应的优化建议，是前端网页性能评判的一个辅助工具，比较 nice。

主要问题是，性能评价标准是多种多样的，比如阿里就有一套网页性能标准测试的 VsCode 的插件，但这并不具有通用性，如果你的使用框架、场景和它的相近的话，是可以使用这些工具来作为性能优化的辅助工具的，否则不必太在意这些工具的结果，更多的还是看页面呈现的效果。

secure-shell

远程服务器连接

类似于 XShell 这一类的工具，可以在 web 端远程连接服务器，免费并且方便。在浏览器端运行使得它在 windows 上也可以方便的使用 shell 连接服务器。我主要是用它来部署微服务项目，很好用。

以上便是我在开发中经常使用的几款插件，如果有更好的插件，欢迎在评论区分享给我！