前端開發(fā)相關(guān)拓展插件

1. WEB前端助手（FeHelper)

FeHelper簡直就是前端開發(fā)人員的神器匙头，它是由國人開發(fā)的一款前端工具集合的小插件瑟慈，插件功能齊全桃移，基本上涵蓋了前端從業(yè)者經(jīng)常會使用到的基礎(chǔ)功能，使用起來也很順手葛碧。下面就來感受一下強(qiáng)大的功能：

image

FE支持按需安裝借杰，也就是說，上面的這些功能进泼， 你需要什用到什么再安裝就行蔗衡， 下面就挑兩個(gè)我工作中使用到的：

• json 格式化

image

• 頁面取色

我們在開發(fā)時(shí)需要對一些內(nèi)容進(jìn)行取色， 很多小伙伴都是打開chrome調(diào)試器再使用取色器進(jìn)行取色乳绕。使用FeHelper的取色器更加方便

image

• JS正則表達(dá)式驗(yàn)證

不僅可以生成常用的正則表達(dá)式, 也可可以校驗(yàn)表達(dá)式是否匹配, 在正則調(diào)試過程中可以起到較好地輔助作用

image

一些前端開發(fā)常用的功能都有绞惦，方便實(shí)用；還有其他好用的功能刷袍，你們慢慢去發(fā)現(xiàn)吧翩隧，這里就不贅述

2. vue-devtools

vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用,被稱為“Vue 調(diào)試神奇” vue是數(shù)據(jù)驅(qū)動(dòng)的, 利用這個(gè)插件呻纹，這樣就能看到vue中每個(gè)組件的data堆生、props、computed等多種屬性和方法雷酪，為我們項(xiàng)目的開發(fā)與調(diào)試提供了很多的便利 淑仆。

image

3. React Developer Tools

如果你使用React進(jìn)行開發(fā)，那必不可少的就是React Developer Tools, 它是Fecebook出品的哥力，同樣使用 React Developer Tools 進(jìn)行調(diào)試時(shí)蔗怠，可以查看應(yīng)用程序的 React 組件分層結(jié)構(gòu)墩弯，而不是更加神秘的瀏覽器 DOM 表示

image

4. Postman

Postman 插件可以復(fù)用瀏覽器的Cookie，更加方便測試寞射。不論你是做后端開發(fā)還是客戶端開發(fā)渔工，Postman都是測試HTTP接口的必備利器，支持集成測試桥温；還可以將測試請求分組引矩，然后批量執(zhí)行。

image

5. Octotree

在GitHub邊側(cè)欄上顯示代碼樹侵浸。非常適合查看項(xiàng)目源代碼旺韭，無需將代碼庫clone到編輯器就可以如同在編輯器中操作一樣， 可以直接搜索文件跳轉(zhuǎn)掏觉。

image

6. Lighthouse 前端性能優(yōu)化測試工具

在前端開發(fā)中区端，對于自己開發(fā)的app或者web page性能的好壞，一直是讓前端開發(fā)很在意的話題澳腹。我們需要專業(yè)的網(wǎng)站測試工具织盼，讓我們知道自己的網(wǎng)頁還有哪些需要更為優(yōu)化的方面，我是使用過的一款工具：Lighthouse 酱塔，感覺還不錯(cuò)悔政，記錄下來，也順便分享給用得著的伙伴延旧。

image

lighthouse 插件會對網(wǎng)頁的各個(gè)測試項(xiàng)的結(jié)果打分，并給出優(yōu)化建議報(bào)告槽地，是一個(gè)非常實(shí)用的可視化網(wǎng)站優(yōu)化工具迁沫。

7. Clear Cache

clear cache通過單擊一個(gè)按鈕清除緩存和瀏覽數(shù)據(jù)。使用此擴(kuò)展快速清除緩存捌蚊，無需任何確認(rèn)對話框集畅，彈出窗口或其他煩惱。點(diǎn)擊圖標(biāo)即可清除緩存缅糟、cookie等挺智，開發(fā)必備！ 可以根據(jù)需要清除的數(shù)據(jù)定制ClearCache窗宦，這些數(shù)據(jù)包括應(yīng)用緩存赦颇，Cookie，下載赴涵，文件系統(tǒng)媒怯，表單數(shù)據(jù)，歷史記錄髓窜，索引數(shù)據(jù)庫扇苞，本地存儲欺殿，插件數(shù)據(jù)，密碼和WebSQL等鳖敷。

image

8. Vimium

Vimium 則繼承了 Vim 中的常用鍵位脖苏，讓你在使用 Chrome 的過程中，無論是瀏覽網(wǎng)頁定踱、切換標(biāo)簽或是其它任何操作棍潘，全都可以只通過鍵盤完成。想像一下屋吨，你再也不需要移動(dòng)鼠標(biāo)去打開一個(gè)鏈接蜒谤，手指不用離開鍵盤，一切都是這么流暢至扰。

image

9. Save All Resources

當(dāng)我們在網(wǎng)頁上看到炫酷的動(dòng)畫效果鳍徽，一個(gè)很自然的想法就是F12， 然后下載資源敢课，但是在chrome開發(fā)者工具中Source是找到當(dāng)前頁面所使用的資源阶祭，而我們希望可以直接一鍵下載所有網(wǎng)頁資源，并且可以保持目錄結(jié)構(gòu)直秆。

image

10. Wappalyzer

展示你訪問的網(wǎng)頁由什么技術(shù)棧所構(gòu)建，準(zhǔn)確率還是不錯(cuò)的圾结，方便分析其他網(wǎng)站

image

日常高頻使用（非開發(fā)類）

1. 谷歌上網(wǎng)助手_GHelper

很多時(shí)候用戶想瀏覽一些國外的網(wǎng)站查閱一些資料,但是國內(nèi)的網(wǎng)絡(luò)環(huán)境難以通過, 所以我們給大家介紹過各種上網(wǎng)助手瑰剃、訪問助手等。今天給大家?guī)淼氖枪雀枭暇W(wǎng)助手的另一個(gè)版本——開發(fā)版（Ghelper）筝野。免費(fèi)使用晌姚，它擁有十二萬的高用戶數(shù)，簡潔明了歇竟，上手方便挥唠！

image

2. SimilarWeb

對于網(wǎng)站開發(fā)者來說，除了網(wǎng)站本身的代碼設(shè)計(jì)與開發(fā)焕议，網(wǎng)站的各種用戶訪問數(shù)據(jù)與流量分析也是很重要的一塊工作宝磨。SimilarWeb 這款 Chrome 插件能夠幫你統(tǒng)計(jì)網(wǎng)站的流量來源與排名，查詢網(wǎng)站參與等各種網(wǎng)站信息盅安。

image

3. Advertising Terminator

廣告終結(jié)者（Advertising Terminator）是你唯一需要的必備廣告過濾擴(kuò)展唤锉。廣告終結(jié)者可以清除幾乎所有的網(wǎng)絡(luò)廣告樣式，包括購物廣告别瞭、浮動(dòng)廣告腌紧、視頻廣告、惡意彈窗畜隶、網(wǎng)絡(luò)跟蹤等...

image

4. Infinity 新標(biāo)簽頁

最后要給大家安利的就是Infinity壁肋，功能強(qiáng)大的新建標(biāo)簽頁擴(kuò)展号胚！做的界面很美，每日壁紙質(zhì)量也很高浸遗！有同步筆記猫胁、代辦事項(xiàng)等，同時(shí)跛锌，喜歡它的網(wǎng)頁圖標(biāo)弃秆，提供了很多常用網(wǎng)站的圖標(biāo)，自定義書簽時(shí)很好看_{唯一的缺點(diǎn)髓帽，就是感覺啟動(dòng)比較慢}

image

5. 新媒體管家——帳號管理&圖文編輯

顧名思義菠赚，新媒體管家的主要功能是管理你的新媒體帳號，目前支持以下平臺：

image

可以讓你同時(shí)管理幾個(gè)平臺的帳號郑藏，或一個(gè)平臺上的多個(gè)帳號衡查。添加帳號之后，就可以通過新媒體管家進(jìn)入相應(yīng)的帳號了必盖。比如拌牲，對于微信公眾平臺來說，你可以添加多個(gè)帳號歌粥，并且同時(shí)登陸塌忽，一天之內(nèi)只需要掃碼登錄一次，便可以直接進(jìn)入后臺失驶。

新媒體管家還有一個(gè)非常有用的功能就是采集素材土居， 當(dāng)你看到心儀的素材，點(diǎn)擊一下采集嬉探，就可以存入自己采集的素材庫装盯，隨時(shí)想用都可以。

6. Extension Manager 擴(kuò)展管理器

給大家安利了這么多插件甲馋， 為了方便管理和使用最后再推薦一個(gè)Extension Manager, 你可以用它來對你安裝的插件進(jìn)行分組管理；還可以快速的切換插件的開啟與關(guān)閉迄损，你可以配置排序規(guī)則定躏， 根據(jù)你的使用評率來排序這些插件。

image