優(yōu)秀程序員都在用哪些 Chrome 拓展工具？

谷歌瀏覽器 Chrome 是我們最常用的瀏覽器之一，而Chrome瀏覽器自帶的開發(fā)者工具Chrome DevTools是Web前端開發(fā)性能調(diào)試的必備工具。但是Chrome能做的遠(yuǎn)遠(yuǎn)不止這么簡單，Chrome的功能通過成千上萬的拓展工具進(jìn)行拓展，讓開發(fā)者們可以在開發(fā)過程中運(yùn)用各種技巧測試網(wǎng)站和應(yīng)用程序、嘗試其他字體和布局，從而大大提高他們的工作效率。下面我們就列出45個Chrome擴(kuò)展器清單，供大家參考。

1.Page Ruler

當(dāng)前評分等級：4.5/5顆星

Page Ruler 是一款可以測量Chrome瀏覽器中網(wǎng)頁元素大小尺寸的插件。Page Ruler能在任何一個網(wǎng)頁顯示標(biāo)尺，它可以為任何你想要測量的頁面控件提供寬、高、位置（上、下、左、右）等信息，而且標(biāo)尺的大小、位置可以很容易地通過拖動標(biāo)尺邊緣、改變靶心位置、或者在工具欄手動更新標(biāo)尺大小和位置來進(jìn)行精確調(diào)整。

Page Ruler同樣提供了一個“組件模式”，它會在你鼠標(biāo)移到組件上時顯示該組件輪廓。更棒的是，你可以瀏覽任何控件的父控件、子控件、同級控件。只是它有一個小缺陷——在頁面重新加載時它不能保存，如果改進(jìn)了這個小缺陷，那它就更完美了。

2. Dimensions

當(dāng)前評分等級：4/5顆星

Dimensions是另一個很好用的Chrome拓展程序，它非常適用于需要在網(wǎng)頁上測量屏幕尺寸和其它設(shè)計(jì)元素的人。比如，Dimensions可以進(jìn)行圖片、輸入框、按鈕、視頻、動圖、文本和圖標(biāo)等元素間的測量。而且這個拓展器是開源的，所以基本上你可以使用Dimensions看到任何關(guān)于瀏覽器中的區(qū)域邊界。

作為前端開發(fā)工具，它能帶來不可思議的工作體驗(yàn)——簡潔、可靠、并有著完美的靜態(tài)設(shè)計(jì)來測量和填充邊距。

3. WhatFont

當(dāng)前評分等級：4/5顆星

WhatFont是一款可以快速識別網(wǎng)頁中字體的Chrome插件，在Chrome中安裝了WhatFont插件以后，WhatFont插件會給出當(dāng)前網(wǎng)頁字體的詳細(xì)信息，如果您是一位網(wǎng)頁的前端開發(fā)人員，使用該插件能夠幫助你更快地識別網(wǎng)頁中的字體，從而結(jié)合這些字體創(chuàng)建出精美的網(wǎng)站。

4. ColorPick Eyedropper

當(dāng)前評分等級：4/5顆星

ColorPicker是一個不依賴于任何JS框架的JavaScript高級顏色選擇器， 它的界面簡單但有條理。ColorPicker能夠在6種不同的顏色模式中顯示整個調(diào)色板，這個顏色選擇器有4種不同的選擇面板，并且這些面板可拖拉也可固定，它的外觀也可以利用CSS更改。

5. Eye Dropper

當(dāng)前評分等級：4/5顆星

Eye Dropper是一個開源的擴(kuò)展，使用它可以方便地從網(wǎng)頁、顏色選擇器和個人顏色歷史中挑選顏色，并且每個挑選的顏色都會儲存到你的個人歷史中。當(dāng)在CMS平臺上構(gòu)建站點(diǎn)時，Eye Dropper這一工具非常有用。

6. TinEye Reverse Image Search

當(dāng)前評分等級：4.5/5顆星

Tineye能快速搜索到幾乎所有圖片的源文件。它會為每一張要搜索的圖片創(chuàng)建一個獨(dú)立標(biāo)識，并且與數(shù)據(jù)庫中其他圖片的標(biāo)識進(jìn)行精確匹配，包括已被編輯，壓縮，重定義大小了的匹配圖片。

它還有一個比較好的功能是你可以按照圖像的大小排序。比如：它可以讓你從表情包中找到源圖像，并以較大的尺寸呈現(xiàn)。它還可以讓你找到他人用以假冒Facebook個人資料的圖片，來舉報(bào)垃圾郵件發(fā)送者的虛假個人信息。

7. Search by Image

當(dāng)前評分等級：4.5/5顆星

Search by Image是谷歌自己的圖片搜索插件，它授權(quán)你可以在網(wǎng)頁的任何圖片上使用谷歌搜索。你可以在任何圖片上點(diǎn)擊右鍵，然后選擇“Search Google with this image”。或者，如果這是你經(jīng)常用的插件，你也可以通過添加點(diǎn)擊圖片搜索來快速使用這個功能。

而且你可以將Search by Image和TinyEye圖像搜索結(jié)合起來使用，這兩種工具可以互補(bǔ)。也就是說，當(dāng)你同時有這兩種工具時，基本上你就可以找到任何東西。但是Search by Image和TinyEye的算法是不同的：Search by Image似乎使用的是板式和顏色，因此在搜索時經(jīng)常會出現(xiàn)完全不相關(guān)的東西；而TinyEye是在所有的迭代中找到完全相同的圖像，即使它的一部分被更改、裁剪，或者它變成了更大的版本等等。

8. BuiltWith Technology Profiler

當(dāng)前評分等級：4.5/5顆星

BuiltWith Technology Profiler是一款不錯的網(wǎng)頁建構(gòu)工具。你可以通過訪問“BuiltWith”網(wǎng)頁獲取更多信息，你也可以在“BuiltWith”添加url來搜索任何網(wǎng)站所使用的技術(shù)。

9. Wappalyzer

當(dāng)前評分等級：5/5顆星

作為創(chuàng)建在Web社區(qū)的，用來建立網(wǎng)站和app軟件的跨平臺工具， Wappalyzer 的功能和 BuiltWith 類似。可檢測內(nèi)容管理系統(tǒng)（CMS）、電子商務(wù)平臺、Web服務(wù)器、JavaScript框架和已安裝的分析工具等。

10. Firebug Lite

當(dāng)前評分等級：4/5顆星

Firebug Lite 是由Firebug Working Group支持的，它能對HTML頁面的代碼進(jìn)行分析，并能對網(wǎng)頁式樣元素提供實(shí)時預(yù)覽。

Firebug Lite不是Firebug或Chrome Developer Tools的替代品，而是可以與這些工具巧妙結(jié)合使用， 提供像HTML元素的豐富視覺效果、DOM元素和Box模型著色功能等。它還能對網(wǎng)站的性能進(jìn)行測試評估，提供對載入時間等的分析。

11. Web Developer

當(dāng)前用戶評論：4.5/5顆星

Web Developer是一項(xiàng)開發(fā)人員必須擁有的拓展工具。使用Web Developer 可以讓我們輕易的獲得網(wǎng)頁的更多信息，進(jìn)一步了解當(dāng)前所瀏覽的網(wǎng)頁。Web Developer可以在任何瀏覽器支持的平臺上運(yùn)行，包括Windows、Mac OS和Linux。Firefox和Opera也可以使用Web Developer。

12. PageEdit

當(dāng)前評分等級：3/5顆星

PageEdit是一款可以把任何網(wǎng)頁變成富文本編輯器的Chrome插件。這個擴(kuò)展工具不僅使用起來很簡單，而且它產(chǎn)生的代碼也非常干凈。用戶在Chrome中安裝了PageEdit插件以后，就可以在打開其他網(wǎng)頁的時候啟動PageEdit插件，給當(dāng)前的網(wǎng)頁添加富文本編輯器的功能。用戶可以使用PageEdit富文本編輯器，以博客編輯的形式來編輯普通網(wǎng)頁，比如：給當(dāng)前的網(wǎng)頁添加一張圖片，或者編輯網(wǎng)頁上的文字等。

13. Code Cola

當(dāng)前評分等級：4.5/5顆星

Code Cola是可視化編輯CSS最好的工具之一。而且Code Cola不僅可以可視化的編輯頁面的CSS，它的源代碼在GitHub上也是可用的。

14. PerfectPixel

當(dāng)前評分等級：4.5/5顆星

perfectpixel是一個極其有用的標(biāo)記插件，它對于開發(fā)者和標(biāo)記設(shè)計(jì)師都是有幫助的。perfectpixel可以讓你對網(wǎng)頁進(jìn)行半透明圖像疊加，并做像素對像素的比較。

15. Forget Me

當(dāng)前評分等級：3.5/5顆星

用Forget Me可以刪除一個網(wǎng)站的所有東西，包括：信息記錄程序、歷史、位置和會話存儲以及其他所有的信息。

只要簡單的點(diǎn)擊一下圖標(biāo)，這樣你就可以永久刪除你曾經(jīng)訪問過的網(wǎng)站的所有跡象；而當(dāng)你雙擊圖標(biāo)的時候，它只會刪除你所瀏覽過的特定網(wǎng)站的歷史和信息程序，不會刪除其他站點(diǎn)上的所有歷史，因?yàn)樗辉谀愕刂窓谥械捻撁嫔线\(yùn)行。

20. Clear Cache

當(dāng)前評分等級：4.5/5顆星

使用 Clear Cache 插件，你可以通過一次單擊，快速刪除瀏覽器中的緩存和數(shù)據(jù)，而無需處理令人煩躁的的確認(rèn)對話框，彈窗，和其他的繁瑣的操作。

你甚至可以通過偏好設(shè)置來定制你想刪除的具體數(shù)據(jù)，比如：應(yīng)用程序的緩存、信息程序、下載文件、文件系統(tǒng)、表單數(shù)據(jù)、歷史、索引數(shù)據(jù)庫、本地存儲、插件數(shù)據(jù)、密碼和WebSQL等。此外，你還可以單獨(dú)刪除某個域名的緩存記錄，使用 Clear Cache 確實(shí)非常方便。

17. Click&Clean

當(dāng)前評分等級：5/5顆星

Click&Clean算是Google Chrome瀏覽器的第一個私人數(shù)據(jù)清理工具了。通過 Click&Clean 插件，用戶可以選擇多種方式來清除Chrome中的歷史記錄。而Click&Clean的清理界面也設(shè)計(jì)的非常新潮，你只需點(diǎn)擊一下即可刪除鍵入的URL、緩存、Cookie、下載歷史、瀏覽歷史記錄。 Click＆Clean甚至還能刪除客戶端Web SQL數(shù)據(jù)庫，F(xiàn)lash Cookies (LSOs)等。

18. User Agent Switcher

當(dāng)前評分等級：4/5顆星

User Agent Switcher 是一款可以模擬搜索引擎爬蟲的程序。使用模擬后的Agent 訪問那些針對搜索引擎做了手腳的網(wǎng)頁，可以看到真實(shí)的內(nèi)容。

而且User Agent Switcher讓你能快速地切換瀏覽器的User Agent(用戶代理、UA)，實(shí)現(xiàn)瀏覽器的華麗大變身。不論是偽裝成其他平臺/品牌的瀏覽器，還是偽裝成其他版本的瀏覽器，都沒有問題。

19. iMacros for Chrome

當(dāng)前評分等級：4/5顆星

iMacros for Chrome是一款可以幫助你自動填寫表單并保存的插件。當(dāng)你在chrome中安裝了iMacros for Chrome插件以后，該插件就會幫助你自動記憶你輸入的表單內(nèi)容，并在下次輸入的時候，它會將這些重復(fù)的操作進(jìn)行恢復(fù)，從而幫助你提高填寫表單的效率，節(jié)省你的時間。

可能有時會遇到幾個會阻礙正確記錄macros的問題，但是可以通過關(guān)閉對話框再重新打開或刷新頁面來很容易的把問題解決掉。

20. Resolution Test

當(dāng)前評分：4/5顆星

chrome的擴(kuò)展程序Resolution Test，用于瀏覽器的分辨率測試。對于做前端開發(fā)來說非常方便。

21. IE Tab extension

當(dāng)前評分：4.5/5顆星

我們可以通過使用IE瀏覽器中的IE Tab extension來顯示網(wǎng)頁。這一工具使你能夠使用Java、ActiveX、Sharepoint、Silverlight等來測試你的網(wǎng)站在不同版本的IE下會不會退出Chrome。不過IE Tab extension僅在Windows中起作用。

22. IE Tab Multi

當(dāng)前評分等級：4.5/5顆星

用IE Tab Multi可以檢查出你的應(yīng)用程序或網(wǎng)站在IE瀏覽器中的顯示。IE Tab Multi是產(chǎn)生與IE行為結(jié)果最相似的工具，它也讓你能夠運(yùn)行ActiveX控件。但是它只支持Windows，而且在Windows 8中它只支持桌面模式。

23. Validity

當(dāng)前評分等級：4/5顆星

你通過在瀏覽器的地址欄中單擊圖標(biāo)來用Validity拓展器快速驗(yàn)證你的代碼。使用Validity只需單擊工具欄中的圖標(biāo)即可驗(yàn)證當(dāng)前HTML文檔，不需要離開頁面。

24. YSlow

當(dāng)前評分：4/5顆星

YSlow是一款基于FireFox的插件，這個插件可以分析網(wǎng)站的頁面，并且它會告訴你為了提高網(wǎng)站性能，你應(yīng)該如何基于某些規(guī)則對網(wǎng)站進(jìn)行優(yōu)化。

25. Chrome Daltonize!

當(dāng)前評分：4/5顆星

用Chrome Daltonize！可以測試你的應(yīng)用程序和網(wǎng)頁對于色盲的可用性。Chrome Daltonize！用兩個不同的過濾器，讓你可以想象到元素是如何出現(xiàn)在色盲的人面前的。

26. Check My Links

當(dāng)前等級：4/5顆星

對于一個Web開發(fā)人員來說，基本上每次完成頁面后都要檢查一下頁面中的每個鏈接是否都已經(jīng)設(shè)置了超鏈接。這時你就需要Check My Links了。你只需要在你想要檢查的網(wǎng)頁上點(diǎn)擊Check My Links的圖標(biāo)，它就會自動開始進(jìn)行檢查。未檢查的鏈接呈黑色，活鏈則是綠色，而死鏈的話就會是紅色高亮顯示。這些在頁面的右上角會有統(tǒng)計(jì)顯示，里面會顯示當(dāng)前的檢查進(jìn)度、活鏈數(shù)量以及死鏈數(shù)量。

27. After the Deadline

當(dāng)前評分等級：4/5顆星

After the Deadline使用人工智能來評估你的拼寫、風(fēng)格和語法，你只需要簡單的在可編輯區(qū)域右下角點(diǎn)擊圖標(biāo)ABC就可以完成對拼寫、語法和風(fēng)格評估。

28. Awesome Screenshot

當(dāng)前評分等級：4.5/5顆星

Awesome Screenshot是一個易于使用的擴(kuò)展工具，它可以快速抓取任何你想要共享或保存的屏幕截圖，并且它可以抓取全屏或部分屏幕，你還可以在共享之前添加備注和注釋、發(fā)表評論、模糊個人或敏感信息等。

29. Clipular

當(dāng)前評分：4/5顆星

clipular是另一個用于抓取屏幕的Chrome擴(kuò)展工具，它本質(zhì)上是一個有書簽功能的屏幕截圖工具。像Awesome Screenshot一樣，clipular也可以快速抓取任何你想要共享或保存的屏幕截圖并會在Google Drive自動保存你的剪輯。

使用clipular時你可以雙擊ALT，點(diǎn)擊拖動你想要捕獲的屏幕區(qū)域然后會出現(xiàn)幾個選項(xiàng)，包括：分享、下載和備份到谷歌驅(qū)動器等。

30. Bukket

當(dāng)前評分等級：4.5/5顆星

bukket是一個非常好用的Chrome拓展器。它可以截圖并對屏幕進(jìn)行錄像。而且Bukket讓“用一個簡單、可靠的視覺書簽工具從你的瀏覽器中捕捉和記錄GIF動畫”成為可能。

31. Marmoset

當(dāng)前評分等級：5/5顆星

Marmoset可以在短短幾秒鐘內(nèi)幫助你制作代碼截圖、輸出線框和標(biāo)記代碼。此外，你可以將做好的代碼截圖等添加主題和其他效果作為snapshots放在你的個人介紹中。

32. Web Timer

當(dāng)前評分：4.5/5顆星

使用Web Timer可以看到你是如何利用上網(wǎng)時間的。它會跟蹤記錄你常使用的標(biāo)簽，并會每三分鐘更新一次，讓你清楚地知道你在哪里投入或浪費(fèi)的時間最多。你的數(shù)據(jù)會顯示在一個直觀的餅圖中，方便你很直觀的看出你的時間分配，有助于你更好的進(jìn)行回顧，從而在接下來上網(wǎng)時提高你的注意力和效率的。

33. Lorem Ipsum Generator

當(dāng)前評分等級：4/5顆星

使用Lorem Ipsum Generator創(chuàng)建虛擬文本，并把虛擬文本放置在你的網(wǎng)站或應(yīng)用程序中既快速又方便，還避免了重復(fù)的剪切和粘貼工作。Lorem Ipsum Generator的目的就是使這一過程更簡單、快速。另外，想要使得Lorem Ipsum用起來更快，有時候是需要刷新一下的。

34. Linkclump

當(dāng)前評分：5/5顆星

Linkclump 是一款用來批量打開網(wǎng)頁中多個鏈接的擴(kuò)展工具，你只需要用鼠標(biāo)拖動框選所有想要打開的鏈接，這樣就能在 LinkClump 的新標(biāo)簽頁、窗口中一次性打開它們，同時你還可以將它們保存為書簽，復(fù)制到剪貼板等等。Linkclump的源代碼可以在GitHub上找到，使用它會使你對任何項(xiàng)目的研究更加有效。

35. AutoPagerize

當(dāng)前評分等級：4/5顆星

使用AutoPagerize可以讓你在一個頁面中加載分頁面，這個方便且直觀的小工具使Web瀏覽更加高效。

36. Session Manager

當(dāng)前評分等級：3.5/5顆星

Session Manager使你可以在任何時候快速簡便地保存當(dāng)前的瀏覽器狀態(tài)，并且它允許你在需要時立即將所有選項(xiàng)卡重新備份。同時Session Manager也有助于將網(wǎng)站進(jìn)行分組，例如：收集社交媒體配置文件、與某些項(xiàng)目相關(guān)的選項(xiàng)卡等。

37. LastPass

當(dāng)前評分：4.5/5顆星

如果你在每一個站點(diǎn)設(shè)置的密碼都是不同的，你可能記不住需要使用的那么多站點(diǎn)的密碼和登錄賬號。而如果使用LastPass，你只要記住的是一個單一的、安全的密碼，就能解決上述問題。

38. Tab Resize

當(dāng)前用戶評論：4/5顆星

通過Tab Resize能使你在單獨(dú)的窗口中將當(dāng)前選項(xiàng)卡調(diào)整到右側(cè)，Tab Resize通過分屏使工作更加便利，并提供多顯示器支持。

你可以使用Tab Resize重新調(diào)整所有選項(xiàng)卡的大小，并在屏幕上有組織地排列它們。并且你還可以通過Tab Resize來模擬多監(jiān)視器設(shè)置。

LintCode領(lǐng)扣