“進步不是勤奮者的功勞。它是懶惰者在嘗試尋找更簡單的方法時取得的成果。”
——羅伯特·海因萊因
1.CSSViewer
這款工具用來識別和顯示元素的CSS屬性是非常方便的。它包含一個浮動面板，你可以將其懸停以檢查頁面上的元素。CSSViewer將你選擇的CSS顯示在一個提示框中，使你可以輕鬆地複製所選的CSS。
它比我們瀏覽器中的內置版本先進得多，後者只能顯示其下方元素的寬度和高度。
https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en
2.Angury
這是我的最愛，也是我的DevTool擴展首選。
Augury是由Rangle.io構建的DevTool擴展，用於調試、分析和優化Angular項目。
Augury在DevTools中提供了豐富的UI，你可以在其中：
- 查看組件的DI樹圖
- 編輯和更改組件中的屬性
- 發射事件
- 還有更多功能……
當我想了解組件的變更檢測觸發器可以進入組件樹多深時，我覺得這款工具是很有用的。
如果你是Angular開發人員，並且沒有在DevTools中使用過Augury，這次可不要錯過它了。當你要直接從瀏覽器調試Angular應用程序時，Angury就是你需要的一切。
https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en
3.React Developer Tools
可以將React Developer Tools視爲“React版的Angury”。
這是React團隊開發的，很棒的開發工具。
就像Augury一樣，React Developer Tools提供了一個內容豐富的UI，我們可以在其中監控React組件中的事件流。你可以檢查React組件的props和狀態，隨意更改props和狀態，並查看在組件樹中是如何更改和傳播的。
我經常使用的一項很酷的功能是高亮顯示重渲染的組件。
4.JSONView
瀏覽器通常不擅長顯示JSON數據。通常情況下，數據都會以黑白兩種顏色顯示，而且看起來十分密集，理解起來也很困難，尤其是在嘗試定位深層嵌套的屬性時會讓人感覺特別麻煩。
JSONView能格式化並美化JSON數據。它以彩色樹狀視圖顯示它們，讓我們更容易識別屬性和值。
https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
5.Library Sniffer
我經常會在瀏覽一些網頁的時候想知道這個網頁是用哪個框架構建的，以及它所使用的是哪些庫。
對於有和我一樣的需求的開發者，Library Sniffer絕對是一個絕佳的選擇。這款工具將爲你提供網頁上的詳細信息，Library Sniffer會告訴你，你正在瀏覽的網頁到底是運行在哪個框架上，是React、Angular、Vue、Svelte還是Wordpress等等。有的時候你肯定想知道這些，就像我一樣。
https://chrome.google.com/webstore/detail/library-sniffer/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh?hl=en
6.Web Developer
這是一個工具包。Web Developer在你的瀏覽器上添加一個工具欄。這個工具欄有許多方便的道具，程序員和設計人員都可以在日常工作中用到它們，從而簡化自己的工作。它的用途包括添加輪廓到元素、顯示標尺、查找頁面上所有損壞的圖像、更改頁面的佈局和處理圖像等。
它還將更多常用功能添加到了默認的DevTools檢查器中。
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
7.LambdaTest
瀏覽器兼容性永遠是Web開發的大坑之一。開發人員經常要考慮如何在不同的瀏覽器上呈現自己的網站。
我們通常選擇的方法是在計算機上安裝不同的瀏覽器，以便我們可以啓動任何瀏覽器並在其上測試我們的網站。
這款擴展程序爲你完成了所有工作。它讓你可以使用桌面和移動設備上的各種瀏覽器來截取網頁的屏幕快照，從而快速、果斷地解答兼容性問題。
8.ColorPick Eyedropper
ColorPick Eyedropper有一個浮動面板，這個浮動面板懸停在網頁中的元素上方，以顯示元素的顏色。單擊該元素會將所選元素的顏色複製到剪貼板。這是快速發現、複製和粘貼顏色的好方法。
9.CSSPeeper
另一個檢查和複製元素樣式的出色工具。
使用CSSPeeper，你可以將鼠標懸停在網頁上的任何元素上，然後單擊鼠標即可複製元素的樣式。
如果你曾經試過在chromeinspector工具中從一個元素複製CSS樣式代碼，就能輕鬆理解CSSPeeper所帶來的價值。
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en
10.WhatFont
“排版是基於經驗和想象力的二維架構”
——赫爾曼·薩普夫
在查看網頁時，經常讓我眼前一亮的是網頁所使用的字體。如果我看上了某種字體，就會本能地單擊鼠標右鍵來查看頁面源，進而檢查並揭示這一奇蹟的源頭。但這套流程對於這麼簡單而常見的東西來說有些過於複雜。
WhatFont讓字體查看起來更加容易。你可以將鼠標懸停在文本上以快速查閱其字體系列。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
附贈：Bit
除了上面的十個擴展程序外，Bit也值得一提。Bit不是Chrome擴展程序，但絕對是遵從“讓你的開發工作更輕鬆”這一精神的工具。
你可以使用Bit從任何代碼庫中“獲取”可重用組件，並將它們共享到bit.dev中的組件集合中。與你的團隊成員一起使用它，可以最大程度地（在存儲庫內和在不同存儲庫之間）重用代碼，加快開發速度，並使代碼庫更易維護。
因此，無論你是要創建自己的可重用組件的私有集合，還是要查閱由開源社區構建的無數組件列表，Bit都是你的好夥伴（https://github.com/teambit/bit）。
小結
這些工具是我的最愛，因爲它們使我的工作更加輕鬆快捷。如果你對此有任何疑問，或建議我添加、更正或刪除任何內容，如果你有你覺得棒的選擇，歡迎留言表達你的看法。
原文鏈接：
https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e