Web開(kāi)發(fā)與設(shè)計(jì)常用的17種Chrome擴(kuò)展包

作者：陳峻編譯 2019-08-08 09:00:00

本文重點(diǎn)介紹針對(duì)Web開(kāi)發(fā)人員和設(shè)計(jì)人員的17個(gè)Chrome擴(kuò)展包，希望能夠提高大家的工作效率。

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

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

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

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

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

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

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

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

4. Marmoset - 代碼快照生成器

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

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

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

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

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

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

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

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

8. Check My Links - 斷開(kāi)的鏈接檢查器

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

9. Clear Cache

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

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

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

11. Ghostery - 隱私工具

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

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

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

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

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

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

14. Sessions Buddy - 選項(xiàng)卡/會(huì)話管理器

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

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

15. CSS Viewer – CSS屬性查看器

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

16. EditThisCookie - Cookie管理器

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