優秀程序員都在用哪些Chrome拓展工具？

時間 2019-11-24

原文原文鏈接

專欄 | 九章算法前端

網址 | http://www.jiuzhang.com程序員

谷歌瀏覽器 Chrome 是咱們最經常使用的瀏覽器之一，而Chrome瀏覽器自帶的開發者工具Chrome DevTools是Web前端開發性能調試的必備工具。可是Chrome能作的遠遠不止這麼簡單，Chrome的功能經過成千上萬的拓展工具進行拓展，讓開發者們能夠在開發過程當中運用各類技巧測試網站和應用程序、嘗試其餘字體和佈局，從而大大提升他們的工做效率。下面咱們就列出45個Chrome擴展器清單，供你們參考。面試

1.Page Ruler算法

當前評分等級：4.5/5顆星chrome

Page Ruler 是一款能夠測量Chrome瀏覽器中網頁元素大小尺寸的插件。Page Ruler能在任何一個網頁顯示標尺，它能夠爲任何你想要測量的頁面控件提供寬、高、位置（上、下、左、右）等信息，並且標尺的大小、位置能夠很容易地經過拖動標尺邊緣、改變靶心位置、或者在工具欄手動更新標尺大小和位置來進行精確調整。數據庫

Page Ruler一樣提供了一個「組件模式」，它會在你鼠標移到組件上時顯示該組件輪廓。更棒的是，你能夠瀏覽任何控件的父控件、子控件、同級控件。只是它有一個小缺陷——在頁面從新加載時它不能保存，若是改進了這個小缺陷，那它就更完美了。瀏覽器

2. Dimensions緩存

當前評分等級：4/5顆星安全

Dimensions是另外一個很好用的Chrome拓展程序，它很是適用於須要在網頁上測量屏幕尺寸和其它設計元素的人。好比，Dimensions能夠進行圖片、輸入框、按鈕、視頻、動圖、文本和圖標等元素間的測量。並且這個拓展器是開源的，因此基本上你可使用Dimensions看到任何關於瀏覽器中的區域邊界。服務器

做爲前端開發工具，它能帶來難以想象的工做體驗——簡潔、可靠、並有着完美的靜態設計來測量和填充邊距。

3. Tape

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

Tape 是一個用來測量像素值的網站設計工具，它可以智能地截取頁面內容，而且能夠很是方便的測量元素的位置和大小。對於像素完美的Web開發，Tape是一個很是有價值的Chrome插件，它簡單、易用且準確，可以解決客戶須要完美像素等問題。若是你常常須要經過截圖來檢測頁面佈局是否完美，那麼 Tape 是很不錯的選擇。

4. WhatFont

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

WhatFont是一款能夠快速識別網頁中字體的Chrome插件，在Chrome中安裝了WhatFont插件之後，WhatFont插件會給出當前網頁字體的詳細信息，若是您是一位網頁的前端開發人員，使用該插件可以幫助你更快地識別網頁中的字體，從而結合這些字體建立出精美的網站。

5. Font Playground

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

Font Playground是另外一款有用的字體工具，它讓你能在你的應用/網站上無需改變任何東西而使用不一樣字體。它能讓你在短短几秒鐘中預覽你選中的字體的效果，而且它還有搜索和收藏你喜歡的字體的功能。

6. ColorPick Eyedropper

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

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

7. Eye Dropper

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

Eye Dropper是一個開源的擴展，使用它能夠方便地從網頁、顏色選擇器和我的顏色歷史中挑選顏色，而且每一個挑選的顏色都會儲存到你的我的歷史中。當在CMS平臺上構建站點時，Eye Dropper這一工具很是有用。

8. TinEye Reverse Image Search

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

Tineye能快速搜索到幾乎全部圖片的源文件。它會爲每一張要搜索的圖片建立一個獨立標識，而且與數據庫中其餘圖片的標識進行精確匹配，包括已被編輯，壓縮，重定義大小了的匹配圖片。

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

9. Search by Image

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

Search by Image是谷歌本身的圖片搜索插件，它受權你能夠在網頁的任何圖片上使用谷歌搜索。你能夠在任何圖片上點擊右鍵，而後選擇「Search Google with this image」。或者，若是這是你常常用的插件，你也能夠經過添加點擊圖片搜索來快速使用這個功能。

並且你能夠將Search by Image和TinyEye圖像搜索結合起來使用，這兩種工具能夠互補。也就是說，當你同時有這兩種工具時，基本上你就能夠找到任何東西。可是Search by Image和TinyEye的算法是不一樣的：Search by Image彷佛使用的是板式和顏色，所以在搜索時常常會出現徹底不相關的東西；而TinyEye是在全部的迭代中找到徹底相同的圖像，即便它的一部分被更改、裁剪，或者它變成了更大的版本等等。

10. BuiltWith Technology Profiler

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

BuiltWith Technology Profiler是一款不錯的網頁建構工具。你能夠經過訪問「BuiltWith」網頁獲取更多信息，你也能夠在「BuiltWith」添加url來搜索任何網站所使用的技術。

11. Wappalyzer

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

做爲建立在Web社區的，用來創建網站和app軟件的跨平臺工具， Wappalyzer 的功能和 BuiltWith 相似。可檢測內容管理系統（CMS）、電子商務平臺、Web服務器、JavaScript框架和已安裝的分析工具等。

12. Firebug Lite

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

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

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

13. Web Developer

當前用戶評論：4.5/5顆星

Web Developer是一項開發人員必須擁有的拓展工具。使用Web Developer 可讓咱們輕易的得到網頁的更多信息，進一步瞭解當前所瀏覽的網頁。Web Developer能夠在任何瀏覽器支持的平臺上運行，包括Windows、Mac OS和Linux。Firefox和Opera也可使用Web Developer。

14. PageEdit

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

PageEdit是一款能夠把任何網頁變成富文本編輯器的Chrome插件。這個擴展工具不只使用起來很簡單，並且它產生的代碼也很是乾淨。用戶在Chrome中安裝了PageEdit插件之後，就能夠在打開其餘網頁的時候啓動PageEdit插件，給當前的網頁添加富文本編輯器的功能。用戶可使用PageEdit富文本編輯器，以博客編輯的形式來編輯普通網頁，好比：給當前的網頁添加一張圖片，或者編輯網頁上的文字等。

15. HTML Instant

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

使用HTML Instant，你能夠實時編輯HTML代碼。它是一個很是有用的工具，適用於即時編輯和編碼指令，你只需在左邊窗口中輸入JavaScript、HTML和CSS代碼，右窗口中便會即時顯示你的更改。

16. Pendule

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

Pendule擴展了Chrome內置的開發工具，同時增添了一些功能，好比：查看、重裝CSS、禁用風格、將選擇輸入變爲文本輸入、顯示隱藏元素、查看和編輯HTML和CSS、JavaScript、驗證等不少方面。

Pendule的界面美觀且基本具備你在網頁設計中使用瀏覽器時所須要的一切關鍵功能。

17. Code Cola

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

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

18. PerfectPixel

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

perfectpixel是一個極其有用的標記插件，它對於開發者和標記設計師都是有幫助的。perfectpixel可讓你對網頁進行半透明圖像疊加，並作像素對像素的比較。

19. Forget Me

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

用Forget Me能夠刪除一個網站的全部東西，包括：信息記錄程序、歷史、位置和會話存儲以及其餘全部的信息。

只要簡單的點擊一下圖標，這樣你就能夠永久刪除你曾經訪問過的網站的全部跡象；而當你雙擊圖標的時候，它只會刪除你所瀏覽過的特定網站的歷史和信息程序，不會刪除其餘站點上的全部歷史，由於它只在你地址欄中的頁面上運行。

20. Clear Cache

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

使用 Clear Cache 插件，你能夠經過一次單擊，快速刪除瀏覽器中的緩存和數據，而無需處理使人煩躁的的確認對話框，彈窗，和其餘的繁瑣的操做。

你甚至能夠經過偏好設置來定製你想刪除的具體數據，好比：應用程序的緩存、信息程序、下載文件、文件系統、表單數據、歷史、索引數據庫、本地存儲、插件數據、密碼和WebSQL等。此外，你還能夠單獨刪除某個域名的緩存記錄，使用 Clear Cache 確實很是方便。

21. Click&Clean

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

Click&Clean算是Google Chrome瀏覽器的第一個私人數據清理工具了。經過 Click&Clean 插件，用戶能夠選擇多種方式來清除Chrome中的歷史記錄。而Click&Clean的清理界面也設計的很是新潮，你只需點擊一下便可刪除鍵入的URL、緩存、Cookie、下載歷史、瀏覽歷史記錄。 Click＆Clean甚至還能刪除客戶端Web SQL數據庫，Flash Cookies (LSOs)等。

22. User Agent Switcher

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

User Agent Switcher 是一款能夠模擬搜索引擎爬蟲的程序。使用模擬後的Agent 訪問那些針對搜索引擎作了手腳的網頁，能夠看到真實的內容。

並且User Agent Switcher讓你能快速地切換瀏覽器的User Agent(用戶代理、UA)，實現瀏覽器的華麗大變身。不管是假裝成其餘平臺/品牌的瀏覽器，仍是假裝成其餘版本的瀏覽器，都沒有問題。

23. iMacros for Chrome

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

iMacros for Chrome是一款能夠幫助你自動填寫表單並保存的插件。當你在chrome中安裝了iMacros for Chrome插件之後，該插件就會幫助你自動記憶你輸入的表單內容，並在下次輸入的時候，它會將這些重複的操做進行恢復，從而幫助你提升填寫表單的效率，節省你的時間。

可能有時會遇到幾個會阻礙正確記錄macros的問題，可是能夠經過關閉對話框再從新打開或刷新頁面來很容易的把問題解決掉。

24. Resolution Test

當前評分：4/5顆星

chrome的擴展程序Resolution Test，用於瀏覽器的分辨率測試。對於作前端開發來講很是方便。

25. IE Tab extension

當前評分：4.5/5顆星

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

26. IE Tab Multi

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

用IE Tab Multi能夠檢查出你的應用程序或網站在IE瀏覽器中的顯示。IE Tab Multi是產生與IE行爲結果最類似的工具，它也讓你可以運行ActiveX控件。可是它只支持Windows，並且在Windows 8中它只支持桌面模式。

27. Validity

8當前評分等級：4/5顆星*

你經過在瀏覽器的地址欄中單擊圖標來用Validity拓展器快速驗證你的代碼。使用Validity只需單擊工具欄中的圖標便可驗證當前HTML文檔，不須要離開頁面。

28. YSlow

當前評分：4/5顆星

YSlow是一款基於FireFox的插件，這個插件能夠分析網站的頁面，而且它會告訴你爲了提升網站性能，你應該如何基於某些規則對網站進行優化。

29. Chrome Daltonize!

當前評分：4/5顆星

用Chrome Daltonize！能夠測試你的應用程序和網頁對於色盲的可用性。Chrome Daltonize！用兩個不一樣的過濾器，讓你能夠想象到元素是如何出如今色盲的人面前的。

30. Check My Links

當前等級：4/5顆星

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

31. After the Deadline

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

After the Deadline使用人工智能來評估你的拼寫、風格和語法，你只須要簡單的在可編輯區域右下角點擊圖標ABC就能夠完成對拼寫、語法和風格評估。

32. Websecurify

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

Websecurify是爲開發人員設計的一個強大的、跨平臺的Web安全測試工具。它能快速、高效的評估網站和應用程序的安全性。對於開發人員來講，有這個工具可使工做效率獲得提升。

33. Awesome Screenshot

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

Awesome Screenshot是一個易於使用的擴展工具，它能夠快速抓取任何你想要共享或保存的屏幕截圖，而且它能夠抓取全屏或部分屏幕，你還能夠在共享以前添加備註和註釋、發表評論、模糊我的或敏感信息等。

34. Clipular

當前評分：4/5顆星

clipular是另外一個用於抓取屏幕的Chrome擴展工具，它本質上是一個有書籤功能的屏幕截圖工具。像Awesome Screenshot同樣，clipular也能夠快速抓取任何你想要共享或保存的屏幕截圖並會在Google Drive自動保存你的剪輯。

使用clipular時你能夠雙擊ALT，點擊拖動你想要捕獲的屏幕區域而後會出現幾個選項，包括：分享、下載和備份到谷歌驅動器等。

35. Bukket

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

bukket是一個很是好用的Chrome拓展器。它能夠截圖並對屏幕進行錄像。並且Bukket讓「用一個簡單、可靠的視覺書籤工具從你的瀏覽器中捕捉和記錄GIF動畫」成爲可能。

36. Marmoset

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

Marmoset能夠在短短几秒鐘內幫助你製做代碼截圖、輸出線框和標記代碼。此外，你能夠將作好的代碼截圖等添加主題和其餘效果做爲snapshots放在你的我的介紹中。

37. Web Timer

當前評分：4.5/5顆星

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

38. Lorem Ipsum Generator

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

使用Lorem Ipsum Generator建立虛擬文本，並把虛擬文本放置在你的網站或應用程序中既快速又方便，還避免了重複的剪切和粘貼工做。Lorem Ipsum Generator的目的就是使這一過程更簡單、快速。另外，想要使得Lorem Ipsum用起來更快，有時候是須要刷新一下的。

39. Linkclump

當前評分：5/5顆星

Linkclump 是一款用來批量打開網頁中多個連接的擴展工具，你只須要用鼠標拖動框選全部想要打開的連接，這樣就能在 LinkClump 的新標籤頁、窗口中一次性打開它們，同時你還能夠將它們保存爲書籤，複製到剪貼板等等。Linkclump的源代碼能夠在GitHub上找到，使用它會使你對任何項目的研究更加有效。