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

1.CSS查看器

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

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

2.字體

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

3.Fonts Ninja

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

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

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

Page Ruler Redux是一個(gè) chrome 擴(kuò)展，可讓您查看網(wǎng)頁上任何元素的寬度、高度和位置。 這對(duì)于優(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對(duì)于 Web 開發(fā)人員來說是一個(gè)非常有用的 Chrome 擴(kuò)展。它簡單但非常有效，尤其是在使用響應(yīng)式設(shè)計(jì)或應(yīng)用程序時(shí)。它會(huì)安裝到 Chrome 中，并將您正在使用的任何屏幕調(diào)整為一系列流行的屏幕尺寸。Window Resizer 等擴(kuò)展有助于開發(fā)在桌面和移動(dòng)設(shè)備上看起來很棒的響應(yīng)式網(wǎng)頁設(shè)計(jì)。

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

7.瀏覽器堆棧

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

安裝擴(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 的趨勢(shì)項(xiàng)目提要，而是通過在瀏覽器的新選項(xiàng)卡區(qū)域中突出顯示所有趨勢(shì)項(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è)非常有效的工具，用于識(shí)別網(wǎng)頁背后的底層技術(shù)。它可以快速識(shí)別 Web 服務(wù)、CMS 類型、分析工具、插件、JavaScript 庫和大量其他應(yīng)用程序。如果您想知道頁面背后的秘密，這是找出答案的一種方法。

只需安裝擴(kuò)展程序，在頁面上選擇它，就會(huì)出現(xiàn)一個(gè)彈出窗口，突出顯示該頁面上運(yùn)行的所有可識(shí)別應(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)色板圖像可供下載
• 下載自動(dòng)生成的草圖模板
• 添加了 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ò)展程序會(huì)向下滾動(dòng)，并且在當(dāng)前頁面上，您正在瀏覽器中查看，將每個(gè)滾動(dòng)窗口組合成一個(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 的流行替代品。如果您的客戶對(duì)占位符文本更加挑剔，或者您想增加商業(yè)網(wǎng)站的感覺，那么這就是您來的地方。這個(gè) Chrome 開發(fā)者擴(kuò)展會(huì)生成 lorem ipsum，但帶有企業(yè)風(fēng)格。

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

17.React Developer Tools

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

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

18.EditThisCookie

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

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

19.UX Check

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

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

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

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

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