web前端助手(FeHelper)1.0免費(fèi)版

WEB前端助手（簡(jiǎn)稱FeHelper）是一款可以幫助web開(kāi)發(fā)人員在處理與html、css、javascript和編碼等方面的web前端開(kāi)發(fā)的問(wèn)題時(shí)，更加得心應(yīng)手的Chrome插件。

FeHelper功能

FeHelper--彈出菜單

插件入口，點(diǎn)擊ICON，插件相關(guān)的所有功能都會(huì)在這里列出來(lái)，在popup中選擇所需使用的功能即可使用

代碼美化

包括Javascript代碼美化、CSS代碼美化、HTML代碼美化；其實(shí)所有C系的代碼，都可以通過(guò)Javascript代碼美化工具進(jìn)行格式化查看

代碼壓縮

包括Web前端Javascript代碼壓縮、CSS代碼壓縮、HTML代碼壓縮

JSON接口自動(dòng)格式化查看

當(dāng)你訪問(wèn)的接口（打開(kāi)的頁(yè)面）返回的是一個(gè)JSON格式的數(shù)據(jù)，F(xiàn)eHelper會(huì)自動(dòng)將內(nèi)容進(jìn)行格式化處理，便于您的查看

JSON查看器

把你的JSON代碼粘貼到JSON查看器的輸入框中，點(diǎn)擊“格式化”，在下方便會(huì)以非常友好的方式列出JSON數(shù)據(jù)，便于查看

字符串編解碼

包括Unicode編碼和解碼、UTF-8字符串編碼和解碼、Base64字符串編解碼、字符串MD5編碼，前端非常實(shí)用的工具

圖片Base64編碼

對(duì)圖片文件進(jìn)行base64編碼，直接拷貝datauri格式的數(shù)據(jù)

二維碼生成器

能對(duì)網(wǎng)址、普通文本內(nèi)容、電話號(hào)碼、通訊錄、短信等編碼并生成二維碼，很實(shí)用的二維碼生成工具

Tracker（Javascript嗅探器）

協(xié)助您了解目標(biāo)網(wǎng)頁(yè)中 JavaScript 的運(yùn)行情況，包括：執(zhí)行覆蓋率、執(zhí)行行數(shù)、是否存在執(zhí)行或語(yǔ)法錯(cuò)誤等信息Tracker官網(wǎng)

時(shí)間（戳）轉(zhuǎn)換工具

支持任意時(shí)間到對(duì)應(yīng)時(shí)間戳的轉(zhuǎn)換；支持任意時(shí)間戳到對(duì)應(yīng)日期的轉(zhuǎn)換

正則表達(dá)式工具

提供一個(gè)正則表達(dá)式的及時(shí)測(cè)試工具，并能將匹配結(jié)果進(jìn)行高亮顯示、高亮定位等；同時(shí)還羅列了一些常用的正則表達(dá)式供開(kāi)發(fā)者使用

頁(yè)面取色工具

提供一個(gè)網(wǎng)頁(yè)取色的工具，任意頁(yè)面均可使用，方便大家在開(kāi)發(fā)過(guò)程中能精準(zhǔn)獲取某元素的顏色值，再也不用截圖后再通過(guò)Photoshop取色了

編碼規(guī)范檢測(cè)

對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行Javascript、CSS、HTML編碼規(guī)范的檢測(cè)，包括文件是否壓縮、標(biāo)簽是否正確閉合、cookie管理等等

頁(yè)面性能檢測(cè)

對(duì)當(dāng)前頁(yè)面的性能進(jìn)行檢測(cè)，如HTTP響應(yīng)時(shí)間、頁(yè)面渲染時(shí)間、是否啟用gzip壓縮等等

FeHelper怎樣使用呢

WEB前端助手的使用方法

1.在谷歌瀏覽器中安裝WEB前端助手FeHelper，并在Chrome的擴(kuò)展管理器中啟動(dòng)WEB前端助手的輔助開(kāi)發(fā)功能

2.點(diǎn)擊Chrome右上角的WEB前端助手插件按鈕啟動(dòng)網(wǎng)頁(yè)前端開(kāi)發(fā)的工具頁(yè)面，在彈出窗口中我們可以看到一些web前端需要的一些小工具鏈接

3.在菜單列表中選擇字符串編解碼選項(xiàng)，打開(kāi)網(wǎng)頁(yè)字符串編碼與解碼的工具頁(yè)面，并把需要編碼或者解碼的字符串輸入到對(duì)應(yīng)的文本框中并選擇一種編解碼，然后點(diǎn)擊轉(zhuǎn)換按鈕就可以在下方看到轉(zhuǎn)換后的字符，

4.選擇WEB前端助手的代碼美化工具按鈕來(lái)美化相應(yīng)的web前端代碼，操作方式如下圖所示：

5.選擇代碼壓縮工具對(duì)相應(yīng)的代碼進(jìn)行壓縮處理，這樣可以減少web頁(yè)面的大小，操作方式如下所示：

6.選擇json代碼格式化查看工具來(lái)查看網(wǎng)頁(yè)后臺(tái)發(fā)來(lái)的json信息

7.使用web前端助手來(lái)開(kāi)發(fā)正則表達(dá)式，對(duì)于對(duì)正則表達(dá)式不太了解的開(kāi)發(fā)人員來(lái)說(shuō)，web前端助手提供了一些常見(jiàn)的正則表達(dá)式供開(kāi)發(fā)人員選用

8.使用web前端助手插件還可以進(jìn)行時(shí)間戳轉(zhuǎn)換的操作

9.使用web前端助手插件將字符串生成二維碼圖片

10.web前端助手插件還可以對(duì)網(wǎng)頁(yè)中的代碼編寫是否符合規(guī)范進(jìn)行檢驗(yàn)，使用方法是先打開(kāi)需要進(jìn)行編碼規(guī)范性檢驗(yàn)的網(wǎng)站，然后選擇web前端助手彈出窗口的編碼規(guī)范檢測(cè)按鈕對(duì)當(dāng)前的網(wǎng)頁(yè)進(jìn)行檢測(cè)

11.選擇web前端助手對(duì)當(dāng)前網(wǎng)頁(yè)的性能進(jìn)行檢測(cè)

12.使用web前端助手的網(wǎng)頁(yè)柵格化檢測(cè)工具對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行柵格化檢測(cè)

13.使用web前端助手插件對(duì)當(dāng)前網(wǎng)頁(yè)的javascript覆蓋面進(jìn)行檢測(cè)