十款面向前端開發人員的chrome擴充（分享）

本篇文章跟大家分享十款面向前端開發人員的chrome擴充功能。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

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讓字體檢視更容易。它使您在把滑鼠懸停在文字上就能快速查看它使用的字體。

結論

以上只是基於我自己的理解，這些擴充功能是我的工作更加的輕鬆快速。

如果您對上面的內容有任何補充，歡迎評論告訴我，謝謝！

 原文出處：https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e

更多程式設計相關知識，請造訪：程式教學！ ！

以上是十款面向前端開發人員的chrome擴充（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！