WEB前端助手（簡稱FeHelper）是一款可以幫助web開發(fā)人員在處理與html、css、javascript和編碼等方面的web前端開發(fā)的問題時(shí)，更加得心應(yīng)手的Chrome插件。讓你在編寫代碼的時(shí)候更加順暢，語言結(jié)構(gòu)更加的優(yōu)化，有需要的前端人員可以下載使用。

FeHelper功能

FeHelper--彈出菜單

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

代碼美化

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

代碼壓縮

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

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

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

JSON查看器

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

字符串編解碼

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

圖片Base64編碼

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

二維碼生成器

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

Tracker（Javascript嗅探器）

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

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

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

正則表達(dá)式工具

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

頁面取色工具

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

編碼規(guī)范檢測

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

頁面性能檢測

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

FeHelper怎樣使用呢

WEB前端助手的使用方法

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

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

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

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

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

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

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

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

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

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

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

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

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