優秀程式設計師都在用哪些Chrome擴充工具?

LintCode領釦發表於2018-07-12

谷歌瀏覽器 Chrome 是我們最常用的瀏覽器之一,而Chrome瀏覽器自帶的開發者工具Chrome DevTools是Web前端開發效能除錯的必備工具。但是Chrome能做的遠遠不止這麼簡單,Chrome的功能通過成千上萬的擴充工具進行擴充,讓開發者們可以在開發過程中運用各種技巧測試網站和應用程式、嘗試其他字型和佈局,從而大大提高他們的工作效率。下面我們就列出45個Chrome擴充套件器清單,供大家參考。


1.Page Ruler

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

Page Ruler 是一款可以測量Chrome瀏覽器中網頁元素大小尺寸的外掛。Page Ruler能在任何一個網頁顯示標尺,它可以為任何你想要測量的頁面控制元件提供寬、高、位置(上、下、左、右)等資訊,而且標尺的大小、位置可以很容易地通過拖動標尺邊緣、改變靶心位置、或者在工具欄手動更新標尺大小和位置來進行精確調整。

Page Ruler同樣提供了一個“元件模式”,它會在你滑鼠移到元件上時顯示該元件輪廓。更棒的是,你可以瀏覽任何控制元件的父控制元件、子控制元件、同級控制元件。只是它有一個小缺陷——在頁面重新載入時它不能儲存,如果改進了這個小缺陷,那它就更完美了。

2. Dimensions

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

Dimensions是另一個很好用的Chrome擴充程式,它非常適用於需要在網頁上測量螢幕尺寸和其它設計元素的人。比如,Dimensions可以進行圖片、輸入框、按鈕、視訊、動圖、文字和圖示等元素間的測量。而且這個擴充器是開源的,所以基本上你可以使用Dimensions看到任何關於瀏覽器中的區域邊界。

作為前端開發工具,它能帶來不可思議的工作體驗——簡潔、可靠、並有著完美的靜態設計來測量和填充邊距。

3. WhatFont

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

WhatFont是一款可以快速識別網頁中字型的Chrome外掛,在Chrome中安裝了WhatFont外掛以後,WhatFont外掛會給出當前網頁字型的詳細資訊,如果您是一位網頁的前端開發人員,使用該外掛能夠幫助你更快地識別網頁中的字型,從而結合這些字型建立出精美的網站。

4. ColorPick Eyedropper

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

ColorPicker是一個不依賴於任何JS框架的JavaScript高階顏色選擇器, 它的介面簡單但有條理。ColorPicker能夠在6種不同的顏色模式中顯示整個調色盤,這個顏色選擇器有4種不同的選擇皮膚,並且這些皮膚可拖拉也可固定,它的外觀也可以利用CSS更改。

5. Eye Dropper

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

Eye Dropper是一個開源的擴充套件,使用它可以方便地從網頁、顏色選擇器和個人顏色歷史中挑選顏色,並且每個挑選的顏色都會儲存到你的個人歷史中。當在CMS平臺上構建站點時,Eye Dropper這一工具非常有用。

6. TinEye Reverse Image Search

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

Tineye能快速搜尋到幾乎所有圖片的原始檔。它會為每一張要搜尋的圖片建立一個獨立標識,並且與資料庫中其他圖片的標識進行精確匹配,包括已被編輯,壓縮,重定義大小了的匹配圖片。

它還有一個比較好的功能是你可以按照影象的大小排序。比如:它可以讓你從表情包中找到源影象,並以較大的尺寸呈現。它還可以讓你找到他人用以假冒Facebook個人資料的圖片,來舉報垃圾郵件傳送者的虛假個人資訊。

7. Search by Image

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

Search by Image是谷歌自己的圖片搜尋外掛,它授權你可以在網頁的任何圖片上使用谷歌搜尋。你可以在任何圖片上點選右鍵,然後選擇“Search Google with this image”。或者,如果這是你經常用的外掛,你也可以通過新增點選圖片搜尋來快速使用這個功能。

而且你可以將Search by Image和TinyEye影象搜尋結合起來使用,這兩種工具可以互補。也就是說,當你同時有這兩種工具時,基本上你就可以找到任何東西。但是Search by Image和TinyEye的演算法是不同的:Search by Image似乎使用的是板式和顏色,因此在搜尋時經常會出現完全不相關的東西;而TinyEye是在所有的迭代中找到完全相同的影象,即使它的一部分被更改、裁剪,或者它變成了更大的版本等等。

8. BuiltWith Technology Profiler

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

BuiltWith Technology Profiler是一款不錯的網頁建構工具。你可以通過訪問“BuiltWith”網頁獲取更多資訊,你也可以在“BuiltWith”新增url來搜尋任何網站所使用的技術。

9. Wappalyzer

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:5/5顆星

作為建立在Web社群的,用來建立網站和app軟體的跨平臺工具, Wappalyzer 的功能和 BuiltWith 類似。可檢測內容管理系統(CMS)、電子商務平臺、Web伺服器、JavaScript框架和已安裝的分析工具等。

10. Firebug Lite

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

Firebug Lite 是由Firebug Working Group支援的,它能對HTML頁面的程式碼進行分析,並能對網頁式樣元素提供實時預覽。

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

11. Web Developer

優秀程式設計師都在用哪些Chrome擴充工具?

當前使用者評論:4.5/5顆星

Web Developer是一項開發人員必須擁有的擴充工具。使用Web Developer 可以讓我們輕易的獲得網頁的更多資訊,進一步瞭解當前所瀏覽的網頁。Web Developer可以在任何瀏覽器支援的平臺上執行,包括Windows、Mac OS和Linux。Firefox和Opera也可以使用Web Developer。

12. PageEdit

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:3/5顆星

PageEdit是一款可以把任何網頁變成富文字編輯器的Chrome外掛。這個擴充套件工具不僅使用起來很簡單,而且它產生的程式碼也非常乾淨。使用者在Chrome中安裝了PageEdit外掛以後,就可以在開啟其他網頁的時候啟動PageEdit外掛,給當前的網頁新增富文字編輯器的功能。使用者可以使用PageEdit富文字編輯器,以部落格編輯的形式來編輯普通網頁,比如:給當前的網頁新增一張圖片,或者編輯網頁上的文字等。

13. Code Cola

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

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

14. PerfectPixel

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

perfectpixel是一個極其有用的標記外掛,它對於開發者和標記設計師都是有幫助的。perfectpixel可以讓你對網頁進行半透明影象疊加,並做畫素對畫素的比較。

15. Forget Me

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:3.5/5顆星

用Forget Me可以刪除一個網站的所有東西,包括:資訊記錄程式、歷史、位置和會話儲存以及其他所有的資訊。

只要簡單的點選一下圖示,這樣你就可以永久刪除你曾經訪問過的網站的所有跡象;而當你雙擊圖示的時候,它只會刪除你所瀏覽過的特定網站的歷史和資訊程式,不會刪除其他站點上的所有歷史,因為它只在你位址列中的頁面上執行。

20. Clear Cache

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

使用 Clear Cache 外掛,你可以通過一次單擊,快速刪除瀏覽器中的快取和資料,而無需處理令人煩躁的的確認對話方塊,彈窗,和其他的繁瑣的操作。

你甚至可以通過偏好設定來定製你想刪除的具體資料,比如:應用程式的快取、資訊程式、下載檔案、檔案系統、表單資料、歷史、索引資料庫、本地儲存、外掛資料、密碼和WebSQL等。此外,你還可以單獨刪除某個域名的快取記錄,使用 Clear Cache 確實非常方便。

17. Click&Clean

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:5/5顆星

Click&Clean算是Google Chrome瀏覽器的第一個私人資料清理工具了。通過 Click&Clean 外掛,使用者可以選擇多種方式來清除Chrome中的歷史記錄。而Click&Clean的清理介面也設計的非常新潮,你只需點選一下即可刪除鍵入的URL、快取、Cookie、下載歷史、瀏覽歷史記錄。 Click&Clean甚至還能刪除客戶端Web SQL資料庫,Flash Cookies (LSOs)等。

18. User Agent Switcher

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

User Agent Switcher 是一款可以模擬搜尋引擎爬蟲的程式。使用模擬後的Agent 訪問那些針對搜尋引擎做了手腳的網頁,可以看到真實的內容。

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

19. iMacros for Chrome

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

iMacros for Chrome是一款可以幫助你自動填寫表單並儲存的外掛。當你在chrome中安裝了iMacros for Chrome外掛以後,該外掛就會幫助你自動記憶你輸入的表單內容,並在下次輸入的時候,它會將這些重複的操作進行恢復,從而幫助你提高填寫表單的效率,節省你的時間。

可能有時會遇到幾個會阻礙正確記錄macros的問題,但是可以通過關閉對話方塊再重新開啟或重新整理頁面來很容易的把問題解決掉。

20. Resolution Test

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4/5顆星

chrome的擴充套件程式Resolution Test,用於瀏覽器的解析度測試。對於做前端開發來說非常方便。

21. IE Tab extension

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4.5/5顆星

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

22. IE Tab Multi

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

用IE Tab Multi可以檢查出你的應用程式或網站在IE瀏覽器中的顯示。IE Tab Multi是產生與IE行為結果最相似的工具,它也讓你能夠執行ActiveX控制元件。但是它只支援Windows,而且在Windows 8中它只支援桌面模式。

23. Validity

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

你通過在瀏覽器的位址列中單擊圖示來用Validity擴充器快速驗證你的程式碼。使用Validity只需單擊工具欄中的圖示即可驗證當前HTML文件,不需要離開頁面。

24. YSlow

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4/5顆星

YSlow是一款基於FireFox的外掛,這個外掛可以分析網站的頁面,並且它會告訴你為了提高網站效能,你應該如何基於某些規則對網站進行優化。

25. Chrome Daltonize!

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4/5顆星

用Chrome Daltonize!可以測試你的應用程式和網頁對於色盲的可用性。Chrome Daltonize!用兩個不同的過濾器,讓你可以想象到元素是如何出現在色盲的人面前的。

26. Check My Links

優秀程式設計師都在用哪些Chrome擴充工具?

當前等級:4/5顆星

對於一個Web開發人員來說,基本上每次完成頁面後都要檢查一下頁面中的每個連結是否都已經設定了超連結。這時你就需要Check My Links了。你只需要在你想要檢查的網頁上點選Check My Links的圖示,它就會自動開始進行檢查。未檢查的連結呈黑色,活鏈則是綠色,而死鏈的話就會是紅色高亮顯示。這些在頁面的右上角會有統計顯示,裡面會顯示當前的檢查進度、活鏈數量以及死鏈數量。

27. After the Deadline

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

After the Deadline使用人工智慧來評估你的拼寫、風格和語法,你只需要簡單的在可編輯區域右下角點選圖示ABC就可以完成對拼寫、語法和風格評估。

28. Awesome Screenshot

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

Awesome Screenshot是一個易於使用的擴充套件工具,它可以快速抓取任何你想要共享或儲存的螢幕截圖,並且它可以抓取全屏或部分螢幕,你還可以在共享之前新增備註和註釋、發表評論、模糊個人或敏感資訊等。

29. Clipular

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4/5顆星

clipular是另一個用於抓取螢幕的Chrome擴充套件工具,它本質上是一個有書籤功能的螢幕截圖工具。像Awesome Screenshot一樣,clipular也可以快速抓取任何你想要共享或儲存的螢幕截圖並會在Google Drive自動儲存你的剪輯。

使用clipular時你可以雙擊ALT,點選拖動你想要捕獲的螢幕區域然後會出現幾個選項,包括:分享、下載和備份到谷歌驅動器等。

30. Bukket

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4.5/5顆星

bukket是一個非常好用的Chrome擴充器。它可以截圖並對螢幕進行錄影。而且Bukket讓“用一個簡單、可靠的視覺書籤工具從你的瀏覽器中捕捉和記錄GIF動畫”成為可能。

31. Marmoset

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:5/5顆星

Marmoset可以在短短几秒鐘內幫助你製作程式碼截圖、輸出線框和標記程式碼。此外,你可以將做好的程式碼截圖等新增主題和其他效果作為snapshots放在你的個人介紹中。

32. Web Timer

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4.5/5顆星

使用Web Timer可以看到你是如何利用上網時間的。它會跟蹤記錄你常使用的標籤,並會每三分鐘更新一次,讓你清楚地知道你在哪裡投入或浪費的時間最多。你的資料會顯示在一個直觀的餅圖中,方便你很直觀的看出你的時間分配,有助於你更好的進行回顧,從而在接下來上網時提高你的注意力和效率的。

33. Lorem Ipsum Generator

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

使用Lorem Ipsum Generator建立虛擬文字,並把虛擬文字放置在你的網站或應用程式中既快速又方便,還避免了重複的剪下和貼上工作。Lorem Ipsum Generator的目的就是使這一過程更簡單、快速。另外,想要使得Lorem Ipsum用起來更快,有時候是需要重新整理一下的。

34. Linkclump

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:5/5顆星

Linkclump 是一款用來批量開啟網頁中多個連結的擴充套件工具,你只需要用滑鼠拖動框選所有想要開啟的連結,這樣就能在 LinkClump 的新標籤頁、視窗中一次性開啟它們,同時你還可以將它們儲存為書籤,複製到剪貼簿等等。Linkclump的原始碼可以在GitHub上找到,使用它會使你對任何專案的研究更加有效。

35. AutoPagerize

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:4/5顆星

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

36. Session Manager

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分等級:3.5/5顆星

Session Manager使你可以在任何時候快速簡便地儲存當前的瀏覽器狀態,並且它允許你在需要時立即將所有選項卡重新備份。同時Session Manager也有助於將網站進行分組,例如:收集社交媒體配置檔案、與某些專案相關的選項卡等。

37. LastPass

優秀程式設計師都在用哪些Chrome擴充工具?

當前評分:4.5/5顆星

如果你在每一個站點設定的密碼都是不同的,你可能記不住需要使用的那麼多站點的密碼和登入賬號。而如果使用LastPass,你只要記住的是一個單一的、安全的密碼,就能解決上述問題。

38. Tab Resize

優秀程式設計師都在用哪些Chrome擴充工具?

當前使用者評論:4/5顆星

通過Tab Resize能使你在單獨的視窗中將當前選項卡調整到右側,Tab Resize通過分屏使工作更加便利,並提供多顯示器支援。

你可以使用Tab Resize重新調整所有選項卡的大小,並在螢幕上有組織地排列它們。並且你還可以通過Tab Resize來模擬多監視器設定。


優秀程式設計師都在用哪些Chrome擴充工具?

優秀程式設計師都在用哪些Chrome擴充工具?

相關文章