WEB前端助手(FeHelper)插件概述

WEB前端助手:FeHelper是一款chrome浏览器插件。包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式化查看、二维码生成器、编码规范检测、栅格规范检测、网页性能检测、页面取色等web前端开发的常见功能。


官方网站:https://www.baidufe.com/fehelper

WEB前端助手(FeHelper)插件功能介绍

这款FeHelper插件对于web前端需要处理的网页html源码压缩,css或javascript的压缩都能处理的很好。如果前端web开发人员需要和后台代码工程师配合,那么使用json数据传输的时候,使用这款FeHelper插件能够帮助web前端工程师更加快速地对json进行解码。当web前端程序与后台进行数据交互的时候使用URL编码肯定是必不可少的了,但是我们往往需要预先知道这款字符编码以后的情况,以为与后台开发人员一同提前作出相应处理或对字符发送期间产生的问题进行排查。如果有特殊的情况,FeHelper插件甚至还可以帮助用户把普通的字符直接编码成时下最流行的二维码图片与移动设备交互。好吧,FeHelper的功能有:
  • 字符串编解码(Unicode/UTF8/Base64/MD5)
  • 代码美化工具(HTML/CSS/JS/XML/SQL)
  • 代码压缩工具(HTML/CSS/JS)
  • Json串格式化(粘贴文本、手动格式化)
  • Json页面美化(页面自动检测并格式化,强制开启)
  • 二维码生成器(支持当前页面生成QrCode)
  • 页面取色工具(滑动鼠标随意取色)
  • Js正则表达式(正则测试、常用正则列表)
  • 时间(戳)转换(Unix戳与本地时间的互转)
  • 图片 Base64(任意图片转DataURI格式)
  • 编码规范检测(HTML/CSS/JS规范检测)
  • 页面性能检测(页面响应时间、Header监测)
  • Ajax调试功能(需在控制台中使用)

WEB前端助手(FeHelper)插件下载安装

1.如果你的chrome应用商店无法打开,你从本站或者其他途径获得了Jsonview插件,那么就选择离线安装该插件。由于Jsonview插件同其他chrome插件一样都是CRX格式的,所以具体的安装方法请参照:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件? 如果CRX格式插件不能离线安装怎么办

Jsonview插件使用方法

WEB前端助手(FeHelper)插件使用说明

1.在chrome浏览器安装好FeHelper插件后,在右下角增加设置入口,点击进入配置界面

2.安装成功后,需要先配置界面,如下图所示:

默认各功能都打开(不影响刚升级用户的使用),另外,所有功能都可以☑️勾选或者取消勾选,以实现功能的开启和停用;如上,取消掉几个功能,然后点击改好了进行保存!

3 配置成功后的功能,就可以开始使用FeHelper了。

4.使用web前端助手插件将字符串生成二维码图片,操作方法如下:以www.cnplugins.com为例

5.在菜单列表中选择字符串编解码选项,打开网页字符串编码与解码的工具页面,并把需要编码或者解码的字符串输入到对应的文本框中并选择一种编解码,然后点击转换按钮就可以在下方看到转换后的字符,如下图所示:

超级好用的前端开发测试Chrome插件-WEB前端助手(FeHelper)的更多相关文章

  1. 超级好用的前端开发测试Chrome插件-基于REST的Web服务客户端

    基于REST的Web服务客户端是一款功能强大的谷歌浏览器插件,使用基于REST的Web服务客户端(模拟REST客户端)可以让用户使用谷歌浏览器模拟REST请求来测试REST风格. 基于REST的Web ...

  2. 前端开发工程师:网易web前端课程,价值1499元【无水印版】

    这套网上的朋友购买分享给我的,特此分享~ 让大家都受益 早日成为强大的web前端开发工程师!!赶紧回复下载吧 下载地址:http://fu83.cn/thread-172-1-1.html

  3. 适合前端开发的 Chrome 扩展有哪些?(十款)

    适合前端开发的 Chrome 扩展有哪些?(十款) 一.总结 好的插件或者框架对程序员的意义重大. 二.适合前端开发的 Chrome 扩展有哪些?(十款) 掘金是一个高质量的技术社区,从 ECMASc ...

  4. Chrome谷歌浏览器web前端开发好用插件(自己用)备忘

    Chrome谷歌浏览器web前端开发好用插件(自己用)备忘 一.总结 英语好一点的话要什么工具就直接去Chrome插件里面找非常方便. 二.测试题-简答题 1.Chrome修改页面字符集是什么? 解答 ...

  5. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  6. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  7. 前端开发工具-VsCode插件【个人开发常用】

     前端开发工具-VsCode插件[个人开发常用] Atom One Dark Theme-主题 Chinese (Simplified) Language Pack for Visual Studio ...

  8. Sublime Text 3前端开发常用优秀插件介绍

    . 首页 博客园 联系我 前言:关于Sublime Text 3. Package Control插件管理. Package Control使用方法/安装Emmet插件. Emmet插件. JsFor ...

  9. Sublime Text 前端开发常用扩展插件推荐

    Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text ...

随机推荐

  1. Django之ORM模型

    ORM介绍 对象关系映射(Object Relational Mapping,简称ORM)模式的作用是在关系型数据库与业务实体对象之间进行映射,这使得我们不需要再去和复杂的SQL语句打交道,只需要简单 ...

  2. 2017-11-15 软件包 java.io学习

    接口摘要 一.接口Closeable 方法摘要:void:close();关闭此流并释放与此流关联的所有系统资源.如果已经关闭该流,则调用此方法无效 涉及的异常信息:IOException ----- ...

  3. Ubuntu安装Anaconda

    安装Anaconda的最简单方法是下载最新的Anaconda安装程序bash脚本,然后运行它. 在Anaconda Downloads页面找到最新版本的Anaconda for Python 3 .当 ...

  4. 攻防组网之—-MikroTik软路由的配置和FUZZ

    作者:红发香克斯 开篇之前一直想借助一台高性能PC利用VMWare组建一个攻防网络,之前有一贴写过找到了一个软路由系统,就是可以在VMWare中使用的路由器操作系统,那个系统还挺常用,上次帖子写到了安 ...

  5. input输入框限制输入正整数、小数、字母、文字

    有的时候需要限制input的输入格式: 例如,输入大于0的正整数 <input onkeyup="if(this.value.length==1){this.value=this.va ...

  6. Java基础学习笔记十二 类、抽象类、接口作为方法参数和返回值以及常用API

    不同修饰符使用细节 常用来修饰类.方法.变量的修饰符 public 权限修饰符,公共访问, 类,方法,成员变量 protected 权限修饰符,受保护访问, 方法,成员变量 默认什么也不写 也是一种权 ...

  7. hibernate框架学习笔记10:HQL查询详解

    HQL语句中不可以出现与表有关的内容,而是对象的属性 实体类(注意配置文件): package domain; import java.util.HashSet; import java.util.S ...

  8. Java读取word中表格

    因为要新建一个站,公司要把word表格的部分行列存到数据库中.之前用java操作过excel,本来打算用java从word表格中读取数据,再存到数据库中,结果因为权限不够,无法访问公司要写的那个数据库 ...

  9. 记录python接口自动化测试--unittest框架基本应用(第二目)

    在第一目里写了几个简单demo,并把调用get和post请求的方法封装到了一个类里,这次结合python自带的unittest框架,用之前封装的方法来写一个接口测试demo 1.unittest简单用 ...

  10. 使用git将文件上传到Coding

    1,首先在Coding上新建项目. 2,填写项目的相关内容. 3,建立项目后复制下面鼠标所选内容. 4,在自己的电脑中建立文件夹. 5,进入该文件夹后,点击鼠标右键,然后再点Git  Clone. 6 ...