小編給大家分享一下前端開(kāi)發(fā)的chrome擴(kuò)展有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1. CSSViewer
這個(gè)工具在識(shí)別和顯示元素的CSS屬性方面很有用。它包括一個(gè)浮動(dòng)窗口，您可以把鼠標(biāo)懸停在頁(yè)面上任一元素上以查看它的所有CSS屬性。您可以通過(guò)快捷鍵在CSSViewer的窗體中輕松復(fù)制您選定元素的樣式。
也許您會(huì)感到奇怪，Chrome本身的開(kāi)發(fā)者工具不是已經(jīng)足夠了嗎，為什么我還要用它？
其實(shí)這個(gè)插件比我們?yōu)g覽器中的開(kāi)發(fā)者工具顯示的信息更多也更先進(jìn)。除了基礎(chǔ)的元素的寬度和高度的盒子模型外，還包括了所有已生效的樣式及更多信息。
2. Augury
Auury是由Rangle.io構(gòu)建的DevTool擴(kuò)展，用于調(diào)試、分析和優(yōu)化Angular項(xiàng)目。
Auury在DevTools中提供了豐富的UI，您可以：
查看組件的依賴注入（DI）樹(shù)圖
編輯及修改組件的屬性
發(fā)射事件
等等…
我個(gè)人認(rèn)為，它在我想要了解組件的變更檢測(cè)觸發(fā)器可以沿著組件樹(shù)向下延伸到多深時(shí)很有用。
如果您是Angular開(kāi)發(fā)人員，并且沒(méi)有在您的DevTool中使用過(guò)Augury，那么這是件很可惜的事情。Augury有著您直接從瀏覽器調(diào)試Angular應(yīng)用程序所需的一切，來(lái)試試吧。
3. React Developer Tools
這是React團(tuán)隊(duì)開(kāi)發(fā)的很棒的DevTool。
就像Augury一樣，React Developer Tools提供了一個(gè)豐富的UI，我們可以在其中監(jiān)視React組件中的事件流。您可以檢查React組件的屬性和狀態(tài)，隨意更改屬性和狀態(tài)，并查看所作的變化在組件樹(shù)中的傳遞過(guò)程。
4. JSONView
瀏覽器通常不太擅長(zhǎng)顯示JSON數(shù)據(jù)。數(shù)據(jù)通常以純黑白的方式密集顯示，這使得理解它非常困難，特別是您試圖定位一個(gè)深度嵌套的屬性時(shí)。
JSONView格式化和美化JSON數(shù)據(jù)。它以豐富著色的樹(shù)狀視圖顯示它們，使得標(biāo)識(shí)屬性和值變得更加容易。
5. Library Sniffer
我通常很想知道網(wǎng)頁(yè)是基于什么框架構(gòu)建的，或這個(gè)站點(diǎn)引用了什么庫(kù)。
Library Sniffer在這方面對(duì)我的幫助很大。這個(gè)工具可以為你提供網(wǎng)頁(yè)上的詳細(xì)信息，無(wú)論它是基于類(lèi)似React,
Angular, Vue, Svelte, Wordpress等平臺(tái)或框架。
6. Web Developer
Web Developer會(huì)將工具欄添加到您的瀏覽器中。這個(gè)工具欄包含許多方便的工具，程序員和設(shè)計(jì)人員都可以在日常工作中使用它們，從而提高工作效率。它的范圍從向元素添加輪廓、顯示標(biāo)尺、查找頁(yè)面上的所有損壞圖像到更改頁(yè)面布局、操作圖片等。
它將這些經(jīng)常需要的功能添加到默認(rèn)的DevTools檢查器中。
7. LambdaTest
多瀏覽器的兼容性一直是一件令Web開(kāi)發(fā)人員苦惱的事情。您的網(wǎng)站在不同的瀏覽器上的呈現(xiàn)是開(kāi)發(fā)人員一直在考慮的問(wèn)題。
我們通常選擇在我們的機(jī)器上安裝不同的瀏覽器，這樣我們就可以在上面啟動(dòng)任何瀏覽器來(lái)測(cè)試我們的網(wǎng)站。
這個(gè)擴(kuò)展可以為您做所有的事情。它使您可以在臺(tái)式機(jī)和移動(dòng)設(shè)備上使用不同的瀏覽器截取網(wǎng)頁(yè)的屏幕截圖，從而為兼容性問(wèn)題提供了快速而決定性的答案。
8. ColorPick Eyedropper
ColorPick Eyedropper有一個(gè)浮動(dòng)面板，它懸停在網(wǎng)頁(yè)中的元素上方，顯示元素的顏色。單擊該元素會(huì)將所選元素的顏色復(fù)制到剪貼板。這是一個(gè)很好的方法，可以加快發(fā)現(xiàn)、復(fù)制和粘貼顏色所需的時(shí)間。
9. CSSPeeper
另一個(gè)檢查和復(fù)制元素樣式的出色工具。
使用CSSPeeper，您可以將鼠標(biāo)懸停在網(wǎng)頁(yè)中的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
如果您曾經(jīng)嘗試從chrome inspector工具中的元素復(fù)制CSS樣式代碼，則可以輕松了解CSSPeeper帶來(lái)的價(jià)值。
10. WhatFont
在瀏覽網(wǎng)頁(yè)時(shí)，通常吸引我眼球的是頁(yè)面中正在使用的字體。當(dāng)我對(duì)某個(gè)文字感興趣想要查看其使用的字體時(shí)，我會(huì)下意識(shí)地單擊鼠標(biāo)右鍵以打開(kāi)開(kāi)發(fā)人員工具，查看它的源代碼。但是，這樣還是太繁瑣了。
WhatFont使字體查看更加容易。它使您在把鼠標(biāo)懸停在文本上就能快速查看它使用的字體。
以上是“前端開(kāi)發(fā)的chrome擴(kuò)展有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
