优秀程序员都在用哪些Chrome拓展工具？

2018 年 2 月 16 日 九章算法 Cecily & Emma

撰文 | Cecily & Emma

编辑 | Shona

专栏 | 郭韶玥

谷歌浏览器 Chrome 是我们最常用的浏览器之一，而Chrome浏览器自带的开发者工具Chrome DevTools是Web前端开发性能调试的必备工具。但是Chrome能做的远远不止这么简单，Chrome的功能通过成千上万的拓展工具进行拓展，让开发者们可以在开发过程中运用各种技巧测试网站和应用程序、尝试其他字体和布局，从而大大提高他们的工作效率。下面我们就列出45个Chrome扩展器清单，供大家参考。

1.Page Ruler

当前评分等级：4.5/5颗星

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

当前评分等级：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上找到，使用它会使你对任何项目的研究更加有效。

40. AutoPagerize