教你如何使用WEB前端助手插件来辅助web开发

发布时间: 编辑:CINDY 0人评论 50118次浏览 Chrome开发者工具插件
直达下载
摘要 : WEB前端助手(简称FeHelper)是一款可以帮助web开发人员在处理与html、css、javascript和编码等方面的web前端开发的问题时,更加得心应手的Chrome插件。

WEB前端助手的开发背景

我们所看到的网页都是由包括web前端设计工程师与web后台代码工程师两部分工程师组成的(有些时候这两种工程师可能由一个或多个人来完成),对于网站的后台代码工程师来说,他们一般只负责设计网页与用户的数据交互部分和网页的后台框架开发,而web的前端工程师则负责开发网页的前端代码(包括html、css、javascript等)和网页的整体美工设计,对于专业于web的美工设计人员来说,他们更加擅长的也许是对网站的色彩、美观方面的研究,对网页前端代码一般都是不太感冒的。对于这部分网页的前端开发人员来说,他们需要一款工具或插件能够帮助他们解决那烦人的代码问题。


WEB前端助手的简介

WEB前端助手,官方简称它为:FeHelper。从它的名字就可以看出来它是一款能够帮助web前端开发人员工作的chrome扩展,这款FeHelper插件对于web前端需要处理的网页html源码压缩,css或javascript的压缩都能处理的很好。

如果前端web开发人员需要和后台代码工程师配合,那么使用json数据传输的时候,使用这款FeHelper插件能够帮助web前端工程师更加快速地对json进行解码。

当web前端程序与后台进行数据交互的时候使用URL编码肯定是必不可少的了,但是我们往往需要预先知道这款字符编码以后的情况,以为与后台开发人员一同提前作出相应处理或对字符发送期间产生的问题进行排查。如果有特殊的情况,FeHelper插件甚至还可以帮助用户把普通的字符直接编码成时下最流行的二维码图片与移动设备交互。

对于一个web前端工程师而言,web的运行效率可能也是开发人员最关心的问题之一,我们辛辛苦苦编写出来的这些web前端页面代码是否符合标准呢?别急,使用WEB前端助手一测便知。


WEB前端助手的使用方法


1.在谷歌浏览器中安装WEB前端助手FeHelper,并在Chrome的扩展管理器中启动WEB前端助手的辅助开发功能,WEB前端助手的下载地址可以在本文的下方找到,安装方法可以参考:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?

2.点击Chrome右上角的WEB前端助手插件按钮启动网页前端开发的工具页面,在弹出窗口中我们可以看到一些web前端需要的一些小工具链接,如图所示:

WEB前端助手的菜单

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

使用WEB前端助手对字符串进行编码或解码

4.选择WEB前端助手的代码美化工具按钮来美化相应的web前端代码,操作方式如下图所示:

使用WEB前端助手对web代码进行美化

5.选择代码压缩工具对相应的代码进行压缩处理,这样可以减少web页面的大小,操作方式如下所示:


使用WEB前端助手对网页代码进行压缩

6.选择json代码格式化查看工具来查看网页后台发来的json信息,如图所示:

选择json代码格式化查看工具来查看网页后台发来的json信息

7.使用web前端助手来开发正则表达式,对于对正则表达式不太了解的开发人员来说,web前端助手提供了一些常见的正则表达式供开发人员选用,使用方法如下:

使用web前端助手编辑正则表达式

8.使用web前端助手插件还可以进行时间戳转换的操作,具体的使用方法如下:

使用web前端助手进行时间戳转换

9.使用web前端助手插件将字符串生成二维码图片,操作方法如下:

使用web前端助手生成二维码图片

10.web前端助手插件还可以对网页中的代码编写是否符合规范进行检验,使用方法是先打开需要进行编码规范性检验的网站,然后选择web前端助手弹出窗口的编码规范检测按钮对当前的网页进行检测,如下图所示:

使用web前端助手对网页的编码规范进行检测

11.选择web前端助手对当前网页的性能进行检测,检测结果如下图所示:

使用web前端助手插件对当前网页的性能进行检测

12.使用web前端助手的网页栅格化检测工具对当前网页进行栅格化检测,如图所示:

使用web前端助手的栅格化检测

13.使用web前端助手插件对当前网页的javascript覆盖面进行检测,操作方法如下:

使用web前端助手对当前网页的javascript覆盖面进行检测


web前端助手的注意事项

1.web前端助手插件的代码检测功能目前只支持网页前端开发的一些html、css、javascript、json类代码进行编辑和检测,对于网页后台语言如java、c++等暂时不提供支持。

2.在使用web前端助手的部分功能时(如代码压缩功能)需要跳转到其官方网站后进行操作,所以当用户需要使用这些功能的时候必须保证网络畅通状态。


web前端助手的联系方式

1.作者:zhaoxianlie。

2.官方网站:http://www.baidufe.com/fehelper。

查看更多

教你如何使用WEB前端助手插件来辅助web开发下载地址

点击下载教你如何使用WEB前端助手插件来辅助web开发

转载必须注明来自:https://huajiakeji.com/web-development/2014-11/285.html

Web Developer

Web Developer

0 人评论 33788 次人浏览 4.4分 4.4 分
web developer(Chrome开发者工具扩展插件)是一款可以安装在谷歌浏览器上的chrome web developer轻量级开发插件,安装使用web developer插件可以让您的开发变得更加顺畅。
眼不见心不烦(新浪微博)

眼不见心不烦(新浪微博)

1 人评论 88488 次人浏览 4.3分 4.3 分
眼不见心不烦是一款可以帮助用户使用新浪微博的时候屏蔽掉自己不喜欢的微博广告、设定屏蔽指定关键词微博、屏蔽指定来源的微博、推广微博、刷屏信息等垃圾微博信息的Chrome插件。
WEB前端助手(FeHelper)

WEB前端助手(FeHelper)

0 人评论 76724 次人浏览 3.8分 3.8 分
FE助手:包括字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码、编码规范检测、页面性能检测、页面取色、Ajax接口调试
百度贴吧助手

百度贴吧助手

0 人评论 26218 次人浏览 3.4分 3.4 分
百度贴吧助手是一款可以帮助百度贴吧的用户自动签到、自定义表情、翻转查看帖子中图片,设置朋友昵称,自定义帖子背景图,一键换号等功能,还可以帮助吧务利用Chrome插件工具扫描广告贴等。
极简Json格式化插件

极简Json格式化插件

0 人评论 51106 次人浏览 3.2分 3.2 分
极简Json格式化是一个非常简单的Chrome插件,用于将JSON接口返回值格式化成可读方式。
AlloyDesigner - 前端开发工具

AlloyDesigner - 前端开发工具

0 人评论 16284 次人浏览 3.0分 3.0 分
AlloyDesigner是一款免费的web前端开发工具,它可以直接嵌入你的Web页面中运行,帮助你精准、高效的构建Web页面的UI。
Responsive Web Design Tester

Responsive Web Design Tester

0 人评论 28820 次人浏览 3.0分 3.0 分
Responsive Web Design Tester是一款可以帮助用户测试网页在其他设备中显示样式的谷歌浏览器插件。
5336网页游戏助手

5336网页游戏助手

0 人评论 22367 次人浏览 3.0分 3.0 分
5336网页游戏助手是一款chrome游戏类插件,可以帮助用户查询网页游戏的开服时间、提供各种网页游戏的小工具的谷歌浏览器插件。
JSON Viewer

JSON Viewer

0 人评论 80334 次人浏览 2.4分 2.4 分
JSON Viewer是最漂亮的、可定制的JSON/JSONP荧光笔高亮插件,用于打印JSON和JSONP。
JSONView

JSONView

0 人评论 141002 次人浏览 2.4分 2.4 分
JSONView是一款非常实用的格式化和语法高亮JSON格式数据查看器jQuery插件。
下一篇 : 票务通
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?