無形中提高工作效率的 Chrome 插件

（給前端大全加星標，提升前端技能）

作者： 程式設計師成長指北/koala （本文來自作者投稿）

開發相關拓展插件1. WEB前端助手（FeHelper)

FeHelper簡直就是前端開發人員的神器，它是由國人開發的一款前端工具集合的小插件，插件功能齊全，基本上涵蓋了前端從業者經常會使用到的基礎功能，使用起來也很順手。下面就來感受一下強大的功能：FE支持按需安裝，也就是說，上面的這些功能， 你需要什用到什麼再安裝就行， 下面就挑兩個我工作中使用到的：

我們在開發時需要對一些內容進行取色， 很多小夥伴都是打開chrome調試器再使用取色器進行取色。使用FeHelper的取色器更加方便

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

一些前端開發常用的功能都有，方便實用；還有其他好用的功能，你們慢慢去發現吧，這裡就不贅述

2. vue-devtools

vue-devtools是一款基於chrome遊覽器的插件，用於調試vue應用,被稱為「Vue 調試神奇」 vue是數據驅動的, 利用這個插件，這樣就能看到vue中每個組件的data、props、computed等多種屬性和方法，為我們項目的開發與調試提供了很多的便利 。

3. React Developer Tools

如果你使用React進行開發，那必不可少的就是React Developer Tools, 它是Fecebook出品的，同樣使用 React Developer Tools 進行調試時，可以查看應用程式的 React 組件分層結構，而不是更加神秘的瀏覽器 DOM 表示

4. Postman

Postman 插件可以復用瀏覽器的Cookie，更加方便測試。不論你是做後端開發還是客戶端開發，Postman都是測試HTTP接口的必備利器，支持集成測試；還可以將測試請求分組，然後批量執行。

5. Octotree

在GitHub邊側欄上顯示代碼樹。非常適合查看項目原始碼，無需將代碼庫clone到編輯器就可以如同在編輯器中操作一樣， 可以直接搜索文件跳轉。

6. Lighthouse 前端性能優化測試工具

在前端開發中，對於自己開發的app或者web page性能的好壞，一直是讓前端開發很在意的話題。我們需要專業的網站測試工具，讓我們知道自己的網頁還有哪些需要更為優化的方面，我是使用過的一款工具：Lighthouse ，感覺還不錯，記錄下來，也順便分享給用得著的夥伴。

lighthouse 插件會對網頁的各個測試項的結果打分，並給出優化建議報告，是一個非常實用的可視化網站優化工具。

7. Clear Cache

clear cache通過單擊一個按鈕清除緩存和瀏覽數據。使用此擴展快速清除緩存，無需任何確認對話框，彈出窗口或其他煩惱。點擊圖標即可清除緩存、cookie等，開發必備！ 可以根據需要清除的數據定製ClearCache，這些數據包括應用緩存，Cookie，下載，文件系統，表單數據，歷史記錄，索引資料庫，本地存儲，插件數據，密碼和WebSQL等。

8. Vimium

Vimium 則繼承了 Vim 中的常用鍵位，讓你在使用 Chrome 的過程中，無論是瀏覽網頁、切換標籤或是其它任何操作，全都可以只通過鍵盤完成。想像一下，你再也不需要移動滑鼠去打開一個連結，手指不用離開鍵盤，一切都是這麼流暢。

9. Save All Resources

當我們在網頁上看到炫酷的動畫效果，一個很自然的想法就是F12， 然後下載資源，但是在chrome開發者工具中Source是找到當前頁面所使用的資源，而我們希望可以直接一鍵下載所有網頁資源，並且可以保持目錄結構。

一鍵下載網頁資源(Save All Resources)，可以完美的滿足我們的需求

10. Wappalyzer

展示你訪問的網頁由什麼技術棧所構建，準確率還是不錯的，方便分析其他網站

日常高頻使用（非開發類）1. 谷歌上網助手_GHelper

很多時候用戶想瀏覽一些國外的網站查閱一些資料,但是國內的網絡環境難以通過, 所以我們給大家介紹過各種上網助手、訪問助手等。今天給大家帶來的是谷歌上網助手的另一個版本——開發版（Ghelper）。免費使用，它擁有十二萬的高用戶數，簡潔明了，上手方便！

2. SimilarWeb

對於網站開發者來說，除了網站本身的代碼設計與開發，網站的各種用戶訪問數據與流量分析也是很重要的一塊工作。SimilarWeb 這款 Chrome 插件能夠幫你統計網站的流量來源與排名，查詢網站參與等各種網站信息。

3. Advertising Terminator

廣告終結者（Advertising Terminator）是你唯一需要的必備廣告過濾擴展。廣告終結者可以清除幾乎所有的網絡廣告樣式，包括購物廣告、浮動廣告、視頻廣告、惡意彈窗、網絡跟蹤等...

4. Infinity 新標籤頁

最後要給大家安利的就是Infinity，功能強大的新建標籤頁擴展！做的界面很美，每日壁紙質量也很高！有同步筆記、代辦事項等，同時，喜歡它的網頁圖標，提供了很多常用網站的圖標，自定義書籤時很好看~唯一的缺點，就是感覺啟動比較慢~

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

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

可以讓你同時管理幾個平臺的帳號，或一個平臺上的多個帳號。添加帳號之後，就可以通過新媒體管家進入相應的帳號了。比如，對於微信公眾平臺來說，你可以添加多個帳號，並且同時登陸，一天之內只需要掃碼登錄一次，便可以直接進入後臺。

新媒體管家還有一個非常有用的功能就是採集素材， 當你看到心儀的素材，點擊一下採集，就可以存入自己採集的素材庫，隨時想用都可以。

6. Extension Manager 擴展管理器

給大家安利了這麼多插件， 為了方便管理和使用最後再推薦一個Extension Manager, 你可以用它來對你安裝的插件進行分組管理；還可以快速的切換插件的開啟與關閉，你可以配置排序規則， 根據你的使用評率來排序這些插件。

獲取及安裝

文中提到的插件，我都已經為大家下載好了，給本公眾號發送關鍵字：插件，就可以領取全部已下載好的安裝包。

正常安裝

首先在標籤頁輸入【chrome://extensions/】進入chrome擴展程序

安裝出現程序包無效CRX-HEADER-INVALID的解決方案, 參照：Chrome插件安裝時出現"CRX-HEADER-INVALID"解決方法。安裝好後即可使用。

推薦大家使用chrome應用商店進行安裝，因為文中已經推薦了谷歌上網助手

覺得本文對你有幫助？請分享給更多人

關注「前端大全」加星標，提升前端技能

好文章，我在看❤️