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

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

1. ColorZilla - 拾色器和發生器

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

2. Site Palette - 調色板生成器

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

3. Font Face Ninja - 字體標識符

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

4. Marmoset - 代碼快照生成器

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

5. LambdaTest Screenshots - 跨瀏覽器測試的擴展

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

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

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

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

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

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

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

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

9. Clear Cache

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

10. Wappalyzer - 站點分析器(技術標識符)

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

11. Ghostery - 隱私工具

Ghostery是一種隱私擴展工具，它通過內置的廣告攔截器，能夠消除目標網站上的彈窗廣告，跟蹤并保護用戶的數據，進而阻止第三方工具的跟蹤。另外，它還附帶有自定義的儀表板，以方便用戶查看攔截掉的相關信息。

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

如果您在網頁中廣泛地使用到了各種API​​，特別是RestFul API、以及JSON數據的相關內容，那么JSON Viewer將有助于讓JSON文件顯示為具有較強可讀性的、樹型縮進排列格式。

13. Window Resizer - 屏幕尺寸樣機

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

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

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

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

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

15. CSS Viewer – CSS屬性查看器

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

16. EditThisCookie - Cookie管理器

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

17. Web Developer - Web開發工具包

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

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

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

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