無(wú)形中提高你工作效率的chrome插件
寫(xiě)在前面：本文所有插件的獲取方式以及如何安裝都寫(xiě)在文末
開(kāi)發(fā)相關(guān)拓展插件
1. WEB前端助手（FeHelper)
FeHelper簡(jiǎn)直就是前端開(kāi)發(fā)人員的神器，它是由國(guó)人開(kāi)發(fā)的一款前端工具集合的小插件，插件功能齊全，基本上涵蓋了前端從業(yè)者經(jīng)常會(huì)使用到的基礎(chǔ)功能，使用起來(lái)也很順手。下面就來(lái)感受一下強(qiáng)大的功能：
FE支持按需安裝，也就是說(shuō)，上面的這些功能， 你需要什用到什么再安裝就行， 下面就挑兩個(gè)我工作中使用到的：
- json 格式化
- 頁(yè)面取色
我們?cè)陂_(kāi)發(fā)時(shí)需要對(duì)一些內(nèi)容進(jìn)行取色， 很多小伙伴都是打開(kāi)chrome調(diào)試器再使用取色器進(jìn)行取色。使用FeHelper的取色器更加方便
- JS正則表達(dá)式驗(yàn)證
不僅可以生成常用的正則表達(dá)式, 也可可以校驗(yàn)表達(dá)式是否匹配, 在正則調(diào)試過(guò)程中可以起到較好地輔助作用
一些前端開(kāi)發(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)目的開(kāi)發(fā)與調(diào)試提供了很多的便利 。
3. React Developer Tools
如果你使用React進(jìn)行開(kāi)發(fā)，那必不可少的就是React Developer Tools, 它是Fecebook出品的，同樣使用 React Developer Tools 進(jìn)行調(diào)試時(shí)，可以查看應(yīng)用程序的 React 組件分層結(jié)構(gòu)，而不是更加神秘的瀏覽器 DOM 表示
4. Postman
Postman 插件可以復(fù)用瀏覽器的Cookie，更加方便測(cè)試。不論你是做后端開(kāi)發(fā)還是客戶端開(kāi)發(fā)，Postman都是測(cè)試HTTP接口的必備利器，支持集成測(cè)試；還可以將測(cè)試請(qǐng)求分組，然后批量執(zhí)行。
5. Octotree
在GitHub邊側(cè)欄上顯示代碼樹(shù)。非常適合查看項(xiàng)目源代碼，無(wú)需將代碼庫(kù)clone到編輯器就可以如同在編輯器中操作一樣， 可以直接搜索文件跳轉(zhuǎn)。
6. Lighthouse 前端性能優(yōu)化測(cè)試工具
在前端開(kāi)發(fā)中，對(duì)于自己開(kāi)發(fā)的app或者web page性能的好壞，一直是讓前端開(kāi)發(fā)很在意的話題。我們需要專業(yè)的網(wǎng)站測(cè)試工具，讓我們知道自己的網(wǎng)頁(yè)還有哪些需要更為優(yōu)化的方面，我是使用過(guò)的一款工具：Lighthouse ，感覺(jué)還不錯(cuò)，記錄下來(lái)，也順便分享給用得著的伙伴。
lighthouse 插件會(huì)對(duì)網(wǎng)頁(yè)的各個(gè)測(cè)試項(xiàng)的結(jié)果打分，并給出優(yōu)化建議報(bào)告，是一個(gè)非常實(shí)用的可視化網(wǎng)站優(yōu)化工具。
7. Clear Cache
clear cache通過(guò)單擊一個(gè)按鈕清除緩存和瀏覽數(shù)據(jù)。使用此擴(kuò)展快速清除緩存，無(wú)需任何確認(rèn)對(duì)話框，彈出窗口或其他煩惱。點(diǎn)擊圖標(biāo)即可清除緩存、cookie等，開(kāi)發(fā)必備！ 可以根據(jù)需要清除的數(shù)據(jù)定制ClearCache，這些數(shù)據(jù)包括應(yīng)用緩存，Cookie，下載，文件系統(tǒng)，表單數(shù)據(jù)，歷史記錄，索引數(shù)據(jù)庫(kù)，本地存儲(chǔ)，插件數(shù)據(jù)，密碼和WebSQL等。
8. Vimium
Vimium 則繼承了 Vim 中的常用鍵位，讓你在使用 Chrome 的過(guò)程中，無(wú)論是瀏覽網(wǎng)頁(yè)、切換標(biāo)簽或是其它任何操作，全都可以只通過(guò)鍵盤(pán)完成。想像一下，你再也不需要移動(dòng)鼠標(biāo)去打開(kāi)一個(gè)鏈接，手指不用離開(kāi)鍵盤(pán)，一切都是這么流暢。
9. Save All Resources
當(dāng)我們?cè)诰W(wǎng)頁(yè)上看到炫酷的動(dòng)畫(huà)效果，一個(gè)很自然的想法就是F12， 然后下載資源，但是在chrome開(kāi)發(fā)者工具中Source是找到當(dāng)前頁(yè)面所使用的資源，而我們希望可以直接一鍵下載所有網(wǎng)頁(yè)資源，并且可以保持目錄結(jié)構(gòu)。
一鍵下載網(wǎng)頁(yè)資源(Save All Resources)，可以完美的滿足我們的需求
10. Wappalyzer
展示你訪問(wèn)的網(wǎng)頁(yè)由什么技術(shù)棧所構(gòu)建，準(zhǔn)確率還是不錯(cuò)的，方便分析其他網(wǎng)站
日常高頻使用（非開(kāi)發(fā)類）
1. 谷歌上網(wǎng)助手_GHelper
很多時(shí)候用戶想瀏覽一些國(guó)外的網(wǎng)站查閱一些資料,但是國(guó)內(nèi)的網(wǎng)絡(luò)環(huán)境難以通過(guò), 所以我們給大家介紹過(guò)各種上網(wǎng)助手、訪問(wèn)助手等。今天給大家?guī)?lái)的是谷歌上網(wǎng)助手的另一個(gè)版本——開(kāi)發(fā)版（Ghelper）。免費(fèi)使用，它擁有十二萬(wàn)的高用戶數(shù)，簡(jiǎn)潔明了，上手方便！
2. SimilarWeb
對(duì)于網(wǎng)站開(kāi)發(fā)者來(lái)說(shuō)，除了網(wǎng)站本身的代碼設(shè)計(jì)與開(kāi)發(fā)，網(wǎng)站的各種用戶訪問(wèn)數(shù)據(jù)與流量分析也是很重要的一塊工作。SimilarWeb 這款 Chrome 插件能夠幫你統(tǒng)計(jì)網(wǎng)站的流量來(lái)源與排名，查詢網(wǎng)站參與等各種網(wǎng)站信息。
3. Advertising Terminator
廣告終結(jié)者（Advertising Terminator）是你唯一需要的必備廣告過(guò)濾擴(kuò)展。廣告終結(jié)者可以清除幾乎所有的網(wǎng)絡(luò)廣告樣式，包括購(gòu)物廣告、浮動(dòng)廣告、視頻廣告、惡意彈窗、網(wǎng)絡(luò)跟蹤等...
4. Infinity 新標(biāo)簽頁(yè)
最后要給大家安利的就是Infinity，功能強(qiáng)大的新建標(biāo)簽頁(yè)擴(kuò)展！做的界面很美，每日壁紙質(zhì)量也很高！有同步筆記、代辦事項(xiàng)等，同時(shí)，喜歡它的網(wǎng)頁(yè)圖標(biāo)，提供了很多常用網(wǎng)站的圖標(biāo)，自定義書(shū)簽時(shí)很好看~唯一的缺點(diǎn)，就是感覺(jué)啟動(dòng)比較慢~
5. 新媒體管家——帳號(hào)管理&圖文編輯
顧名思義，新媒體管家的主要功能是管理你的新媒體帳號(hào)，目前支持以下平臺(tái)：
可以讓你同時(shí)管理幾個(gè)平臺(tái)的帳號(hào)，或一個(gè)平臺(tái)上的多個(gè)帳號(hào)。添加帳號(hào)之后，就可以通過(guò)新媒體管家進(jìn)入相應(yīng)的帳號(hào)了。比如，對(duì)于微信公眾平臺(tái)來(lái)說(shuō)，你可以添加多個(gè)帳號(hào)，并且同時(shí)登陸，一天之內(nèi)只需要掃碼登錄一次，便可以直接進(jìn)入后臺(tái)。
新媒體管家還有一個(gè)非常有用的功能就是采集素材， 當(dāng)你看到心儀的素材，點(diǎn)擊一下采集，就可以存入自己采集的素材庫(kù)，隨時(shí)想用都可以。
6. Extension Manager 擴(kuò)展管理器
給大家安利了這么多插件， 為了方便管理和使用最后再推薦一個(gè)Extension Manager, 你可以用它來(lái)對(duì)你安裝的插件進(jìn)行分組管理；還可以快速的切換插件的開(kāi)啟與關(guān)閉，你可以配置排序規(guī)則， 根據(jù)你的使用評(píng)率來(lái)排序這些插件。
獲取及安裝
文中提到的插件，我都已經(jīng)為大家下載好了，關(guān)注公眾號(hào)【程序員成長(zhǎng)指北】回復(fù)：插件，就可以領(lǐng)取全部已下載好的安裝包.
正常安裝
- 首先在標(biāo)簽頁(yè)輸入【chrome://extensions/】進(jìn)入chrome擴(kuò)展程序
- 解壓你在本站下載的插件，并拖入擴(kuò)展程序頁(yè)即可。
安裝出現(xiàn)程序包無(wú)效CRX-HEADER-INVALID的解決方案, 參照：Chrome插件安裝時(shí)出現(xiàn)"CRX-HEADER-INVALID"解決方法。安裝好后即可使用。
推薦大家使用chrome應(yīng)用商店進(jìn)行安裝，因?yàn)槲椅闹幸呀?jīng)推薦了谷歌上網(wǎng)助手