李涛自留地
回到顶部
首页 > 前端 > 前端实用插件推荐：Web前端助手插件

前端实用插件推荐：Web前端助手插件

文章目录

很早之前我在学习前端时就在谷歌浏览器中安装了Web开发者助手插件FeHelper，当时也只局限于使用压缩代码、页面取色、代码美化这些比较基础的功能，今天想在谷歌浏览器浏览器中使用截图功能点开了这个插件，发现其实这个插件还是挺不错的，功能比较齐全，在我们前端开发和实际工作中，很多功能还是很实用的，以下是对Web开发者助手安装方法及Web前端助手所具备的功能的记载。

一、Web开发者助手安装方法

1、Web开发者助手插件下载
因国内无法访问谷歌网站，所以无法在Chrome谷歌浏览器中直接安装Web前端工具，可以直接搜索到官网下载安装使用。

前端实用插件推荐：Web前端助手插件

目前Web开发者助手官网公布的支持的浏览器只有Chrome、 Firefox、Edge三款使用率最高的浏览器。

2、Chrome中安装Web开发者助手
在官网可以直接快速安装，如果官网无法直接快速安装，可以搜索一些专门提供Chrome插件的网站找这个插件。在Chrome中打开更多工具选项→扩展程序→开启网页右上角的开发者模式，将fehelper前端助手.crx文件拖向Chrome中进行安装。
3、开启所需要的插件功能
安装Web开发者助手后，默认只开启了JSON美化工具功能，点开Chrome地址栏右侧Web前端助手工具图标，点开最右下角设置选项，在FH应用市场可安装所需要的功能。

二、Web前端助手所具备的功能

FH应用市场展示的Web前端助手所具备的工具表格如下：

序号 工具名称 工具功能
1 JSON美化工具 页面自动检测并格式化、手动格式化、乱码解码、排序、BigInt、编辑、下载、皮肤定制等
2 图片转Base64 支持多种模式的图片转Base64格式，比如链接粘贴/截图粘贴等，也支持Base64数据逆转图片
3 二维码/解码 支持自定义颜色和icon的二维码生成器，并且支持多种模式的二维码解码，包括截图后粘贴解码
4 JSON比对工具 支持两个JSON内容的自动键值比较，并高亮显示差异点，同时也能判断JSON是否合法
5 信息编码转换 支持多格式的信息编解码，如Unicode、UTF-8、UTF-16、URL、Base64、MD5、Hex、Gzip等
6 我的便签笔记 方便快捷的浏览器便签笔记工具，支持创建目录对笔记进行分类管理，笔记支持一键导出/导入
7 代码美化工具 支持多语言的代码美化，包括 Javascript、CSS、HTML、XML、SQL。
8 Markdown工具 Markdown编辑器，支持在线编写、预览、下载等，并支持HTML内容到Markdown格式的转换
9 网页栅格标尺 Web开发用，横竖两把尺子，以10px为单位，用以检测&校准当前网页的栅格对齐率
10 代码压缩工具 Web开发用，提供简单的代码压缩功能，支持HTML、Javascript、CSS代码压缩
11 网页性能检测 检测网页加载性能，包括握手、响应、渲染等各阶段耗时，同时提供Response Headers以便分析
12 网页截屏工具 可对任意网页进行截屏，支持可视区域截屏、全网页滚动截屏，最终结果可预览后再保存
13 页面取色工具 可直接在网页上针对任意元素进行色值采集，将光标移动到需要取色的位置，单击确定即可
14 JS正则表达式 正则校验工具，默认提供一些工作中常用的正则表达式，支持内容实时匹配并高亮显示结果
15 便捷思维导图 轻量便捷，随想随用，支持自动保存、本地数据存储、批量数据导入导出、图片格式下载等
16 时间(戳)转换 本地化时间与时间戳之间的相互转换，支持秒/毫秒、支持世界时区切换、各时区时钟展示等
17 随机密码生成 将各种字符进行随机组合生成密码，可以由数字、大小写字母、特殊符号组成，支持指定长度
18 简易Postman 开发过程中的接口调试工具，支持GET/POST/HEAD请求方式，且支持JSON内容自动格式化
19 进制转换工具 支持2进制到36进制数据之间的任意转换，比如：10进制转2进制，8进制转16进制，等等
20 颜色转换工具 支持HEX颜色到RGB格式的互转，比如HEX颜色「#43ad7f」转RGB后为「rgb(67, 173, 127)」
21 Crontab工具 一个简易的Crontab生成工具，支持随机生成Demo，编辑过程中，分时日月周会高亮提示
22 贷(还)款利率 贷款或还款利率的计算器，按月呈现还款计划；并支持按还款额反推贷款实际利率
23 网页油猴工具 自行配置页面匹配规则、编写Hack脚本，实现网页Hack，如页面自动刷新、自动抢票等
24 Excel转JSON 将Excel或CVS中的数据，直接转换成为结构化数据，如JSON、XML、MySQL、PHP等By @hpng

以上表格中的24个工具可以根据自己需求单个安装即可，试用下了下Markdown、便捷思维导图和JS正则表达式，这些工具实在是用着不错。

Web前端助手中这些丰富多样化的工具，可以在我们实际学习和工作中节省不少时间，推荐有需要的朋友安装使用此插件。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。