相信我谷歌瀏覽器是瀏覽器里絕對最好的，想用好瀏覽器一定要知道這20個(gè)有用的擴(kuò)展程序。

1.CSS查看器

CSS Viewer是一個(gè)簡單但非常有效的 Web 開發(fā)者 Chrome 擴(kuò)展。顧名思義，無論您將鼠標(biāo)懸停在何處，此插件都會向您顯示給定頁面的 CSS 屬性。將出現(xiàn)一個(gè)小的彈出窗口，向您顯示構(gòu)成您指向的元素的 CSS 數(shù)據(jù)。

無論您是想創(chuàng)建簡單的 WordPress 主題還是現(xiàn)代和復(fù)雜的主題，這都是一個(gè)非常智能的擴(kuò)展，可以在您將鼠標(biāo)指向的任何地方輕松識別關(guān)鍵 CSS 屬性。

2.字體

WhatFont對于需要識別網(wǎng)頁上使用的字體的開發(fā)人員來說是一個(gè)非常有用的 Chrome 擴(kuò)展程序。它快速、有效，并且可以在幾秒鐘內(nèi)識別頁面中的單個(gè)字體。它還標(biāo)識了家庭、大小、重量和顏色。所有這些都在瀏覽器的一個(gè)小彈出窗口中。

3.Fonts Ninja

Fonts Ninja以與 WhatFont 類似的方式來識別網(wǎng)頁中的字體。如果 WhatFont 出于任何原因不適合您，這是一個(gè)有用的選擇。它的工作原理幾乎相同，但界面更小。否則，這兩個(gè)擴(kuò)展的外觀和感覺非常相似。

安裝擴(kuò)展程序，您應(yīng)該會在工具欄中看到一個(gè)小的綠色忍者圖標(biāo)。在 Chrome 中打開網(wǎng)頁，選擇圖標(biāo)，然后將鼠標(biāo)懸停在您要識別的字體上。您應(yīng)該會在突出顯示的字體上看到一個(gè)頁面概覽彈出窗口和一個(gè)單獨(dú)的彈出窗口。簡單但非常有效。

4.頁面標(biāo)尺 Redux

Page Ruler Redux是一個(gè) chrome 擴(kuò)展，可讓您查看網(wǎng)頁上任何元素的寬度、高度和位置。 這對于優(yōu)化您的網(wǎng)站以獲得更好的可讀性非常有幫助。此外，Page Ruler Redux 提供了鍵盤快捷鍵，可以輕松瀏覽您的網(wǎng)頁。

5.CSS 窺視器

CSS Peeper允許您檢查網(wǎng)站上使用的整個(gè)調(diào)色板。您可以以視覺上吸引人的方式查看所有這些列表，以便您找到它們。

CSS Peeper是為設(shè)計(jì)師量身定制的 CSS 查看器。使用 Chrome 擴(kuò)展程序訪問有用的樣式。使命是讓設(shè)計(jì)師專注于設(shè)計(jì)，并盡可能少地花時(shí)間挖掘代碼。

6.窗口調(diào)整器

Window Resizer對于 Web 開發(fā)人員來說是一個(gè)非常有用的 Chrome 擴(kuò)展。它簡單但非常有效，尤其是在使用響應(yīng)式設(shè)計(jì)或應(yīng)用程序時(shí)。它會安裝到 Chrome 中，并將您正在使用的任何屏幕調(diào)整為一系列流行的屏幕尺寸。Window Resizer 等擴(kuò)展有助于開發(fā)在桌面和移動設(shè)備上看起來很棒的響應(yīng)式網(wǎng)頁設(shè)計(jì)。

涵蓋了最常見的尺寸、移動設(shè)備、平板電腦、臺式機(jī)，并且仿真似乎非常準(zhǔn)確。這里的人經(jīng)常使用 Window Resizer 并對其評價(jià)很高。這對我們來說已經(jīng)足夠了！

7.瀏覽器堆棧

BrowserStack是另一個(gè)對 Web 開發(fā)人員非常有用的 Chrome 擴(kuò)展。與 Window Resizer 一樣，此擴(kuò)展程序允許您測試您的工作的響應(yīng)能力。此擴(kuò)展程序允許您使用不同的瀏覽器進(jìn)行測試，而不是不同的屏幕尺寸。

安裝擴(kuò)展程序，在 Chrome 中打開您的頁面，選擇 BrowserStack 并從選項(xiàng)卡中選擇一個(gè)設(shè)備選項(xiàng)。然后將使用該設(shè)備上的瀏覽器仿真來呈現(xiàn)該頁面。簡單但非常有效。不過，您確實(shí)需要一個(gè) BrowserStack 帳戶才能使其正常工作。

8.像素設(shè)置

此擴(kuò)展程序可幫助您以像素完美的準(zhǔn)確性開發(fā)您的網(wǎng)站！

PerfectPixel允許開發(fā)人員和標(biāo)記設(shè)計(jì)人員在已開發(fā)的 HTML 頂部放置一個(gè)半透明的圖像疊加層，并在它們之間進(jìn)行像素完美的比較。

9.Githunt

如果您在 GitHub 上花費(fèi)大量時(shí)間尋找新項(xiàng)目，Githunt非常有用。這個(gè) Chrome 開發(fā)者擴(kuò)展不依賴于 GitHub 的趨勢項(xiàng)目提要，而是通過在瀏覽器的新選項(xiàng)卡區(qū)域中突出顯示所有趨勢項(xiàng)目，從而將其脫穎而出。

您可以搜索不同語言的項(xiàng)目，并閱讀簡短的項(xiàng)目描述和當(dāng)前打開的問題數(shù)量。然后，您只需在選項(xiàng)卡中選擇項(xiàng)目即可轉(zhuǎn)到該項(xiàng)目并進(jìn)一步檢查它。如果您喜歡為新項(xiàng)目做出貢獻(xiàn)，這是一個(gè)非常有用的小擴(kuò)展。

10.Wappalyzer

Wappalyzer是一個(gè)非常有效的工具，用于識別網(wǎng)頁背后的底層技術(shù)。它可以快速識別 Web 服務(wù)、CMS 類型、分析工具、插件、JavaScript 庫和大量其他應(yīng)用程序。如果您想知道頁面背后的秘密，這是找出答案的一種方法。

只需安裝擴(kuò)展程序，在頁面上選擇它，就會出現(xiàn)一個(gè)彈出窗口，突出顯示該頁面上運(yùn)行的所有可識別應(yīng)用程序。

11.Web Developer ChecklistWeb 開發(fā)人員清單

分析任何網(wǎng)頁是否違反最佳實(shí)踐。此擴(kuò)展可幫助 Web 開發(fā)人員輕松發(fā)現(xiàn)網(wǎng)站中的問題區(qū)域。

12.Site Palette網(wǎng)站調(diào)色

生成調(diào)色板的免費(fèi)瀏覽器擴(kuò)展。設(shè)計(jì)師和前端開發(fā)人員必備的工具。抓取任何網(wǎng)站的顏色。

• 免費(fèi)的站點(diǎn)調(diào)色板 API 可用！
• 支持多個(gè)調(diào)色板生成器
• 已創(chuàng)建可共享鏈接
• 預(yù)覽調(diào)色板圖像可供下載
• 下載自動生成的草圖模板
• 添加了 Adob e Swatch 支持
• 玩轉(zhuǎn)colors.co的調(diào)色板
• 在 Google Art Palette 微調(diào)調(diào)色板
• 添加了打印樣式：打印出調(diào)色板或?qū)⒄{(diào)色板保存為 PDF

13.GoFullPage

GoFullPage是一個(gè)瀏覽器擴(kuò)展程序，可以截取您在瀏覽器中查看的整個(gè)網(wǎng)頁的屏幕截圖。當(dāng)您單擊擴(kuò)展程序圖標(biāo)時(shí)，擴(kuò)展程序會向下滾動，并且在當(dāng)前頁面上，您正在瀏覽器中查看，將每個(gè)滾動窗口組合成一個(gè)顯示在新選項(xiàng)卡中的圖像。

14.Check My Links

Check My Links是一個(gè)鏈接檢查器，它可以抓取您的網(wǎng)頁并查找損壞的鏈接。它是主要為網(wǎng)頁設(shè)計(jì)師、開發(fā)人員和內(nèi)容編輯器開發(fā)的擴(kuò)展。

當(dāng)您編輯一個(gè)包含大量鏈接的網(wǎng)頁時(shí)，能夠快速檢查頁面上的所有鏈接是否正常工作不是很方便嗎？這就是“檢查我的鏈接”的用武之地。

該擴(kuò)展程序可以快速找到網(wǎng)頁上的所有鏈接并為您檢查每個(gè)鏈接。它突出顯示哪些是有效的，哪些是壞的，就這么簡單。

您可以一鍵將所有壞鏈接復(fù)制到剪貼板！

15.Lorem Ipsum 生成器

Lorem Ipsum Generator是最好的 Chrome 擴(kuò)展之一。它的功能正如其名稱所暗示的那樣。它為演示網(wǎng)站生成填充文本并且做得很好。

只需安裝擴(kuò)展程序，在頁面中選擇它，告訴它您要生成多少 Lorem Ipsum 副本，然后從窗口中復(fù)制它。將其粘貼到您的頁面中，您就完成了。

16.企業(yè) Ipsum

Corporate Ipsum是 Lorem Ipsum Generator 的流行替代品。如果您的客戶對占位符文本更加挑剔，或者您想增加商業(yè)網(wǎng)站的感覺，那么這就是您來的地方。這個(gè) Chrome 開發(fā)者擴(kuò)展會生成 lorem ipsum，但帶有企業(yè)風(fēng)格。

它也很像 Lorem Ipsum 生成器。安裝擴(kuò)展程序，打開您的頁面，選擇圖標(biāo)并告訴它要生成多少副本。復(fù)制并將其分頁到位并移動到下一個(gè)。這是一種生成更多面向業(yè)務(wù)的占位符文本的快速、簡單的方法。

17.React Developer Tools

React Developer Tools專門用于開源 React JavaScript 庫。如果您使用 React，此擴(kuò)展可幫助您根據(jù)需要檢查庫。

安裝擴(kuò)展程序，您應(yīng)該會在 Chrome 工具欄中看到兩個(gè)圖標(biāo)。一個(gè)用于組件，另一個(gè)用于 Profiler。組件向您顯示 React 在頁面上使用的內(nèi)容，而 Profiler 向您顯示性能數(shù)據(jù)。如果您使用 React，這是必不可少的工具！

18.EditThisCookie

EditThisCookie是一個(gè)對開發(fā)人員非常有用的 Chrome 擴(kuò)展。它使您能夠按頁面編輯、刪除、創(chuàng)建和保護(hù) cookie。它還允許您將它們導(dǎo)出以進(jìn)行分析、阻止它們、將它們導(dǎo)入 JSON，并且通常可以對 cookie 執(zhí)行盡可能多的操作。

最有用的工具是搜索和讀取 cookie 的能力。開發(fā)人員會發(fā)現(xiàn)大多數(shù)工具在某一時(shí)刻很有用。

19.UX Check

UX Check是一個(gè)可用性分析器，它使用 Nielsen 的 10 個(gè)啟發(fā)式方法來評估頁面。它可以快速突出潛在的可用性問題，并使您能夠添加注釋、截屏并導(dǎo)出準(zhǔn)備在團(tuán)隊(duì)中共享的發(fā)現(xiàn)。

UX Check 是一種非常有效的方式來執(zhí)行輕量級用戶測試，而不需要過多的細(xì)節(jié)。在交付項(xiàng)目進(jìn)行全面測試之前作為第一次通過測試的理想選擇。

20.Checkbot檢查機(jī)器人

Checkbot它檢查頁面的鏈接、錯(cuò)誤、安全性、性能、搜索引擎優(yōu)化和一系列其他注意事項(xiàng)。這是一個(gè)非常有用的工具，可以添加到您的曲目中，并且對于發(fā)布前的最后一遍非常有用。

這20個(gè)擴(kuò)展工具前端開發(fā)人員很有用，也有一些專門適用于狹窄領(lǐng)域的工具?？梢宰屇墓ぷ鞲p松。無論是通過提高生產(chǎn)力、解決問題還是簡化流程，這里都有工具可以完成所有這些事情，甚至更多。