導讀作者：koala轉發連接：https://mp.weixin.qq.com/s/Kj6UIdEEr8M7S3rNHXEACg開發相關拓展插件1.WEB前端助....

作者： koala

轉發連接：https://mp.weixin.qq.com/s/Kj6UIdEEr8M7S3rNHXEACg

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

FeHelper簡直就是前端開發人員的神器，它是由國人開發的一款前端工具集合的小插件，插件功能齊全，基本上涵蓋了前端從業者經常會使用到的基礎功能，使用起來也很順手。下面就來感受一下強大的功能：

FE支持按需安裝，也就是說，上面的這些功能， 你需要什用到什么再安裝就行， 下面就挑兩個我工作中使用到的：

• json 格式化

• 頁面取色

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

• JS正則表達式驗證

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

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

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, 你可以用它來對你安裝的插件進行分組管理；還可以快速的切換插件的開啟與關閉，你可以配置排序規則， 根據你的使用頻率來排序這些插件。

獲取及安裝

文中提到的插件，我都已經為大家下載好了，關注公眾號【程序員成長指北】回復：插件，就可以領取全部已下載好的安裝包.

正常安裝

1. 首先在標簽頁輸入【chrome://extensions/】進入chrome擴展程序
2. 解壓你在本站下載的插件，并拖入擴展程序頁即可。

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

推薦Chrome實用相關文章

10 款值得珍藏的 Chrome 瀏覽器插件

Chrome 運行時性能瓶頸分析

提升Chrome使用效率的 30個快捷鍵、16個擴展插件與11個前端調試

Chrome 開發者工具的 11 個騷技巧【實踐】

Chrome DevTools 你還只會console.log，就OUT了

Chrome Devtools 高級調試指南（新）

【新消息】Chrome 81 正式發布 ！消滅混合內容最后一步

前端性能優化之利用 Chrome Dev Tools 進行頁面性能分析

手把手教你提高你生產力的隱藏7個Chrome DevTools功能

作者： koala

轉發連接：https://mp.weixin.qq.com/s/Kj6UIdEEr8M7S3rNHXEACg