轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e
1. CSSViewer
這個工具在識別和顯示元素的CSS屬性方面很有用。它包括一個浮動窗口，您可以把鼠標懸停在頁面上任一元素上以查看它的所有CSS屬性。您可以通過快捷鍵在CSSViewer的窗體中輕松復制您選定元素的樣式。
也許您會感到奇怪，Chrome本身的開發者工具不是已經足夠了嗎，為什么我還要用它？
其實這個插件比我們瀏覽器中的開發者工具顯示的信息更多也更先進。除了基礎的元素的寬度和高度的盒子模型外，還包括了所有已生效的樣式及更多信息。
2. Augury
Auury是由Rangle.io構建的DevTool擴展，用於調試、分析和優化Angular項目。
Auury在DevTools中提供了豐富的UI，您可以：
- 查看組件的依賴注入（DI）樹圖
- 編輯及修改組件的屬性
- 發射事件
- 等等…
我個人認為，它在我想要了解組件的變更檢測觸發器可以沿着組件樹向下延伸到多深時很有用。
如果您是Angular開發人員，並且沒有在您的DevTool中使用過Augury，那么這是件很可惜的事情。Augury有着您直接從瀏覽器調試Angular應用程序所需的一切，來試試吧。
3. React Developer Tools
這是React團隊開發的很棒的DevTool。
就像Augury一樣，React Developer Tools提供了一個豐富的UI，我們可以在其中監視React組件中的事件流。您可以檢查React組件的屬性和狀態，隨意更改屬性和狀態，並查看所作的變化在組件樹中的傳遞過程。
4. JSONView
瀏覽器通常不太擅長顯示JSON數據。數據通常以純黑白的方式密集顯示，這使得理解它非常困難，特別是您試圖定位一個深度嵌套的屬性時。
JSONView格式化和美化JSON數據。它以豐富着色的樹狀視圖顯示它們，使得標識屬性和值變得更加容易。
5. Library Sniffer
我通常很想知道網頁是基於什么框架構建的，或這個站點引用了什么庫。
Library Sniffer在這方面對我的幫助很大。這個工具可以為你提供網頁上的詳細信息，無論它是基於類似React, Angular, Vue, Svelte, Wordpress等平台或框架。
6. Web Developer
Web Developer會將工具欄添加到您的瀏覽器中。這個工具欄包含許多方便的工具，程序員和設計人員都可以在日常工作中使用它們，從而提高工作效率。它的范圍從向元素添加輪廓、顯示標尺、查找頁面上的所有損壞圖像到更改頁面布局、操作圖片等。
它將這些經常需要的功能添加到默認的DevTools檢查器中。
7. LambdaTest
多瀏覽器的兼容性一直是一件令Web開發人員苦惱的事情。您的網站在不同的瀏覽器上的呈現是開發人員一直在考慮的問題。
我們通常選擇在我們的機器上安裝不同的瀏覽器，這樣我們就可以在上面啟動任何瀏覽器來測試我們的網站。
這個擴展可以為您做所有的事情。它使您可以在台式機和移動設備上使用不同的瀏覽器截取網頁的屏幕截圖，從而為兼容性問題提供了快速而決定性的答案。
8. ColorPick Eyedropper
ColorPick Eyedropper有一個浮動面板，它懸停在網頁中的元素上方，顯示元素的顏色。單擊該元素會將所選元素的顏色復制到剪貼板。這是一個很好的方法，可以加快發現、復制和粘貼顏色所需的時間。
9. CSSPeeper
另一個檢查和復制元素樣式的出色工具。
使用CSSPeeper，您可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
如果您曾經嘗試從chrome inspector工具中的元素復制CSS樣式代碼，則可以輕松了解CSSPeeper帶來的價值。
10. WhatFont
在瀏覽網頁時，通常吸引我眼球的是頁面中正在使用的字體。當我對某個文字感興趣想要查看其使用的字體時，我會下意識地單擊鼠標右鍵以打開開發人員工具，查看它的源代碼。但是，這樣還是太繁瑣了。
WhatFont使字體查看更加容易。它使您在把鼠標懸停在文本上就能快速查看它使用的字體。
結論
以上只是基於我自己的理解，這些擴展是我的工作更加的輕松快捷。
如果您對上面的內容有任何補充，歡迎評論告訴我，謝謝！