【51CTO.com快譯】谷歌Chrome無疑是世界上受用戶歡迎的瀏覽器之一。如今，谷歌Chrome擁有的用戶數(shù)量已遠(yuǎn)遠(yuǎn)領(lǐng)先于Mozilla、Firefox、Safari、Opera以及Microsoft Edge等主流瀏覽器。

在短短十多年間，谷歌Chrome已經(jīng)成功占領(lǐng)了全球超過65%的市場份額。Chrome得以迅速崛起的一個關(guān)鍵因素是：它擁有龐大的擴(kuò)展庫。但是，用戶在面對這些紛繁復(fù)雜的擴(kuò)展包時，難免會犯“選擇恐懼癥”。在本文中，我們將重點介紹針對Web開發(fā)人員和設(shè)計人員的17個Chrome擴(kuò)展包，希望能夠提高大家的工作效率。

1. ColorZilla - 拾色器和發(fā)生器

ColorZilla早在八年前就推出了，它是古老的顏色選擇器擴(kuò)展包之一。ColorZilla能夠讓用戶從瀏覽器上的任何像素中，獲取顏色讀數(shù)，并將其粘貼到RGB十六進(jìn)制格式(HEX formats)的任意程序中。類似于下文將要提到的Site Palette，ColorZilla也可以讓用戶從任何網(wǎng)站上生成漸變的顏色、并提取調(diào)色板。該擴(kuò)展包還能夠保持用戶最近選擇過顏色的歷史索引。

2. Site Palette - 調(diào)色板生成器

如果您在目標(biāo)網(wǎng)站上發(fā)現(xiàn)了某個漂亮且令人愉悅的顏色組合，那么這款小巧的插件就可以幫助您快速地提取并生成相應(yīng)的彩色托盤。同時，Site Palette還允許您直接從網(wǎng)站上下載各種預(yù)覽版的調(diào)色板圖像、PDF文件、并生成可分享的鏈接。另外，Site Palette還能夠與coolers.co、以及Google Art Pallete進(jìn)行無縫集成。

3. Font Face Ninja - 字體標(biāo)識符

過去，開發(fā)人員需要通過檢查Chrome開發(fā)工具中的元素，以找出當(dāng)前正在使用的字體名稱。如今，他們可以依靠Font Face Ninja，來識別網(wǎng)頁上所用到的各種字體。目前，F(xiàn)ont Face Ninja擁有超過280,000次下載。該擴(kuò)展程序的用法十分簡單，您只需將鼠標(biāo)懸停在任何需要識別的網(wǎng)頁文本元素上即可。它的彈出窗口將顯示字體相應(yīng)的名稱，以及一個小的預(yù)覽窗口。在此，您可以為喜愛的字體添加并保存書簽，以供日后再次使用。

4. Marmoset - 代碼快照生成器

有時候，為了達(dá)到某種美學(xué)效果、或是某個項目目的，Web設(shè)計人員和開發(fā)人員可能需要為代碼創(chuàng)建一個快照。Marmoset允許您通過單擊的方式，創(chuàng)建各種代碼的快照。該服務(wù)功能對于設(shè)計某些社交媒體的帖子、或是投資組合的網(wǎng)站非常實用。

5. LambdaTest Screenshots - 跨瀏覽器測試的擴(kuò)展

作為應(yīng)用開發(fā)人員，我們往往需要對網(wǎng)站應(yīng)用開展各種瀏覽器類型的測試，以確保應(yīng)用中各種平臺上都能夠顯示友好。然而，如果我們通過VMware、及其相應(yīng)的設(shè)置來安裝多個瀏覽器與平臺，則經(jīng)常是一件繁瑣的事。如今，LambdaTest提供了一個基于云端的平臺，用戶可以針對不同的設(shè)備，在2000多個真實的瀏覽器、及其版本上執(zhí)行各種跨瀏覽器的測試，進(jìn)而確保目標(biāo)網(wǎng)站的兼容與顯示效果。對于桌面級設(shè)備而言，您可以在Windows和macOS上進(jìn)行測試;而對于移動設(shè)備，您可以在Android和iOS上進(jìn)行測試。

LambdaTest針對Chrome推出的擴(kuò)展程序，可幫助用戶批量執(zhí)行自動化的截屏測試。您可以一次性在25個設(shè)備上執(zhí)行屏幕截圖測試。一旦發(fā)現(xiàn)任何UI方面的異常，您就可以通過其項目管理工具，與同事共享相應(yīng)的出錯信息。

6. Page Ruler - 尺寸與大小檢查器

Page Ruler可幫助Web開發(fā)人員快速地檢測頁面上任何元素的尺寸和位置。用戶可以通過該擴(kuò)展包在屏幕上繪制帶有標(biāo)尺圖形，以檢查單個元素的長、寬、高、以及位置。

7. Dimensions - 尺寸與大小檢查器

Dimensions有助于測量網(wǎng)頁上各種元素之間的距離。用戶可以實時測量鼠標(biāo)指針的某個點到其邊界的向上、向下、向左、以及向右的距離。因此，該工具可以測量圖像、輸入字段、按鈕、視頻、GIF、文本、以及圖標(biāo)之間距離。Dimensions的另一個特點是：如果您的設(shè)計師將Jpeg或PNG格式的頁面設(shè)計模型(mockups)交付給您，Dimensions就能夠確保您以合適的尺寸放入Chrome并運行之。當(dāng)然，您唯一需要注意的是，Dimensions并不一定能夠?qū)λ懈袷降膱D像進(jìn)行協(xié)同工作。

8. Check My Links - 斷開的鏈接檢查器

Check My Links能夠“爬取(crawl)”整個目標(biāo)網(wǎng)頁，驗證每一個鏈接，并報告它們的有效性。用戶可以通過單擊，將那些失效的鏈接復(fù)制到某個剪貼板中?？梢?，Check My Links能夠幫助用戶識別并糾正有效頁面上的任何失效鏈接，這對于網(wǎng)站的搜索引擎優(yōu)化(SEO)、以及避免谷歌網(wǎng)站抓取工具對于錯誤的處罰都是至關(guān)重要的。

9. Clear Cache

Clear Cache有助于清除頁面上的緩存、以及瀏覽過的數(shù)據(jù)，而且無需用戶響應(yīng)任何彈窗、對話框或Chrome的設(shè)置窗口。此外，用戶還可以細(xì)粒度地通過擴(kuò)展選項，來自定義需要清除的數(shù)據(jù)，其中包括：應(yīng)用緩存、Cookie、下載項、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和WebSQL等。您既可以一次性刪除全局Cookie，也可以僅刪除掉特定域的Cookie。

10. Wappalyzer - 站點分析器(技術(shù)標(biāo)識符)

當(dāng)看到酷炫的網(wǎng)站時，熱愛技術(shù)的開發(fā)人員，主要關(guān)注的是該網(wǎng)站到底用到了哪些前衛(wèi)的技術(shù)和實現(xiàn)方式。由Elbert Alias于2009年創(chuàng)建的跨平臺工具Wappalyzer就能夠以Chrome擴(kuò)展包的形式，向用戶揭示目標(biāo)網(wǎng)站所用到的技術(shù)名稱。它可以自動檢測出超過1,000多種技術(shù)，其中包括：各種站點生成器、框架、軟件庫、插件、CMS、數(shù)據(jù)庫、服務(wù)器軟件、小部件(widgets)、以及分析工具等。

11. Ghostery - 隱私工具

Ghostery是一種隱私擴(kuò)展工具，它通過內(nèi)置的廣告攔截器，能夠消除目標(biāo)網(wǎng)站上的彈窗廣告，跟蹤并保護(hù)用戶的數(shù)據(jù)，進(jìn)而阻止第三方工具的跟蹤。另外，它還附帶有自定義的儀表板，以方便用戶查看攔截掉的相關(guān)信息。

12. JSON Viewer – JSON美化與查看器

如果您在網(wǎng)頁中廣泛地使用到了各種API​​，特別是RestFul API、以及JSON數(shù)據(jù)的相關(guān)內(nèi)容，那么JSON Viewer將有助于讓JSON文件顯示為具有較強(qiáng)可讀性的、樹型縮進(jìn)排列格式。

13. Window Resizer - 屏幕尺寸樣機(jī)

作為一款響應(yīng)式設(shè)計代碼的擴(kuò)展工具，Resizer可以模擬所有流行設(shè)備的任何屏幕尺寸和分辨率。這對于測試在不同大小界面上的布局，以及驗證響應(yīng)式媒體查詢是否能按照預(yù)期運行是非常重要的。

不過，Window Resizer只能通過調(diào)整窗體的大小，來讓用戶獲悉網(wǎng)站在不同屏幕尺寸上的呈現(xiàn)效果。對于需要更準(zhǔn)確、更全面的響應(yīng)式測試而言，用戶則需要用真正的移動瀏覽器來予以驗證。

14. Sessions Buddy - 選項卡/會話管理器

對于使用慢速系統(tǒng)的開發(fā)人員而言，在處理多個選項卡時難免會遇到屏幕持續(xù)卡頓的的問題。因此，在失去了已打開的選項卡，以及需要處理StackOverflow問題時，用戶需要有效的選項卡管理。

Sessions Buddy提供了帶有簡單界面的書簽管理器。它可以幫助用戶保存會話、并在以后打開瀏覽器時予以恢復(fù)。因此，您不需擔(dān)心在瀏覽器窗口異常關(guān)閉、或系統(tǒng)出現(xiàn)崩潰時，丟失會話。

15. CSS Viewer – CSS屬性查看器

CSS Viewer能夠提取窗口或源代碼中的所有有價值的CSS屬性，并在其浮動窗口中顯示出來。當(dāng)您將鼠標(biāo)懸停在目標(biāo)網(wǎng)頁上的某個元素處，CSS Viewer就會在浮動窗口中列出所有關(guān)鍵的CSS屬性，其中包括：字體、字號、文本系列、粗細(xì)程度、行距、對其方式、顏色、背景、字符框的高度、寬度、填充、邊距、位置、效果等其他雜項。

16. EditThisCookie - Cookie管理器

EditThisCookie是Chrome擴(kuò)展庫中受用戶歡迎的Cookie管理器之一，它擁有超過270萬用戶。此工具允許您添加、刪除、搜索、編輯、阻止、以及保護(hù)(只讀)Cookie。此外，您還可以導(dǎo)入JSON或cookies.txt格式的Cookie。

17. Web Developer - Web開發(fā)工具包

該擴(kuò)展程序會在瀏覽器中添加一個包含完整Web開發(fā)套件的工具欄。該工具分為10個單獨的選項卡，它們分別是：禁用、Cookie、CSS、表單、圖像、信息、雜項、大綱、大小調(diào)整和工具。

這些工具的功能包括：禁用Javascript、插件、彈窗、Cookie管理器、CSS屬性查看器與編輯器、表單與圖像操作、窗口大小調(diào)整器、緩存管理、頁面標(biāo)尺、以及屬性檢查器等。

原文標(biāo)題：17 Chrome Extensions For Web Developers and Designers In 2019，作者：Nikhil Tyagi

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】