谷歌浏览器 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看到任何关于浏览器中的区域边界。服务器
做为前端开发工具,它能带来难以想象的工做体验——简洁、可靠、并有着完美的静态设计来测量和填充边距。app
3. WhatFont框架
当前评分等级:4/5颗星
WhatFont是一款能够快速识别网页中字体的Chrome插件,在Chrome中安装了WhatFont插件之后,WhatFont插件会给出当前网页字体的详细信息,若是您是一位网页的前端开发人员,使用该插件可以帮助你更快地识别网页中的字体,从而结合这些字体建立出精美的网站。
4. ColorPick Eyedropper
当前评分等级:4/5颗星
ColorPicker是一个不依赖于任何JS框架的JavaScript高级颜色选择器, 它的界面简单但有条理。ColorPicker可以在6种不一样的颜色模式中显示整个调色板,这个颜色选择器有4种不一样的选择面板,而且这些面板可拖拉也可固定,它的外观也能够利用CSS更改。
5. Eye Dropper
当前评分等级:4/5颗星
Eye Dropper是一个开源的扩展,使用它能够方便地从网页、颜色选择器和我的颜色历史中挑选颜色,而且每一个挑选的颜色都会储存到你的我的历史中。当在CMS平台上构建站点时,Eye Dropper这一工具很是有用。
6. TinEye Reverse Image Search
当前评分等级:4.5/5颗星
Tineye能快速搜索到几乎全部图片的源文件。它会为每一张要搜索的图片建立一个独立标识,而且与数据库中其余图片的标识进行精确匹配,包括已被编辑,压缩,重定义大小了的匹配图片。
它还有一个比较好的功能是你能够按照图像的大小排序。好比:它可让你从表情包中找到源图像,并以较大的尺寸呈现。它还可让你找到他人用以假冒Facebook我的资料的图片,来举报垃圾邮件发送者的虚假我的信息。
7. 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是在全部的迭代中找到彻底相同的图像,即便它的一部分被更改、裁剪,或者它变成了更大的版本等等。
8. BuiltWith Technology Profiler
当前评分等级:4.5/5颗星
BuiltWith Technology Profiler是一款不错的网页建构工具。你能够经过访问“BuiltWith”网页获取更多信息,你也能够在“BuiltWith”添加url来搜索任何网站所使用的技术。
9. Wappalyzer
当前评分等级:5/5颗星
做为建立在Web社区的,用来创建网站和app软件的跨平台工具, Wappalyzer 的功能和 BuiltWith 相似。可检测内容管理系统(CMS)、电子商务平台、Web服务器、JavaScript框架和已安装的分析工具等。
10. Firebug Lite
当前评分等级:4/5颗星
Firebug Lite 是由Firebug Working Group支持的,它能对HTML页面的代码进行分析,并能对网页式样元素提供实时预览。
Firebug Lite不是Firebug或Chrome Developer Tools的替代品,而是能够与这些工具巧妙结合使用, 提供像HTML元素的丰富视觉效果、DOM元素和Box模型着色功能等。它还能对网站的性能进行测试评估,提供对载入时间等的分析。
11. Web Developer
当前用户评论:4.5/5颗星
Web Developer是一项开发人员必须拥有的拓展工具。使用Web Developer 可让咱们轻易的得到网页的更多信息,进一步了解当前所浏览的网页。Web Developer能够在任何浏览器支持的平台上运行,包括Windows、Mac OS和Linux。Firefox和Opera也可使用Web Developer。
12. PageEdit
当前评分等级:3/5颗星
PageEdit是一款能够把任何网页变成富文本编辑器的Chrome插件。这个扩展工具不只使用起来很简单,并且它产生的代码也很是干净。用户在Chrome中安装了PageEdit插件之后,就能够在打开其余网页的时候启动PageEdit插件,给当前的网页添加富文本编辑器的功能。用户可使用PageEdit富文本编辑器,以博客编辑的形式来编辑普通网页,好比:给当前的网页添加一张图片,或者编辑网页上的文字等。
13. Code Cola
当前评分等级:4.5/5颗星
Code Cola是可视化编辑CSS最好的工具之一。并且Code Cola不只能够可视化的编辑页面的CSS,它的源代码在GitHub上也是可用的。
14. PerfectPixel
当前评分等级:4.5/5颗星
perfectpixel是一个极其有用的标记插件,它对于开发者和标记设计师都是有帮助的。perfectpixel可让你对网页进行半透明图像叠加,并作像素对像素的比较。
15. Forget Me
当前评分等级:3.5/5颗星
用Forget Me能够删除一个网站的全部东西,包括:信息记录程序、历史、位置和会话存储以及其余全部的信息。
只要简单的点击一下图标,这样你就能够永久删除你曾经访问过的网站的全部迹象;而当你双击图标的时候,它只会删除你所浏览过的特定网站的历史和信息程序,不会删除其余站点上的全部历史,由于它只在你地址栏中的页面上运行。
20. Clear Cache
当前评分等级:4.5/5颗星
使用 Clear Cache 插件,你能够经过一次单击,快速删除浏览器中的缓存和数据,而无需处理使人烦躁的的确认对话框,弹窗,和其余的繁琐的操做。
你甚至能够经过偏好设置来定制你想删除的具体数据,好比:应用程序的缓存、信息程序、下载文件、文件系统、表单数据、历史、索引数据库、本地存储、插件数据、密码和WebSQL等。此外,你还能够单独删除某个域名的缓存记录,使用 Clear Cache 确实很是方便。
17. Click&Clean
当前评分等级:5/5颗星
Click&Clean算是Google Chrome浏览器的第一个私人数据清理工具了。经过 Click&Clean 插件,用户能够选择多种方式来清除Chrome中的历史记录。而Click&Clean的清理界面也设计的很是新潮,你只需点击一下便可删除键入的URL、缓存、Cookie、下载历史、浏览历史记录。 Click&Clean甚至还能删除客户端Web SQL数据库,Flash Cookies (LSOs)等。
18. User Agent Switcher
当前评分等级:4/5颗星
User Agent Switcher 是一款能够模拟搜索引擎爬虫的程序。使用模拟后的Agent 访问那些针对搜索引擎作了手脚的网页,能够看到真实的内容。
并且User Agent Switcher让你能快速地切换浏览器的User Agent(用户代理、UA),实现浏览器的华丽大变身。不管是假装成其余平台/品牌的浏览器,仍是假装成其余版本的浏览器,都没有问题。
19. iMacros for Chrome
当前评分等级:4/5颗星
iMacros for Chrome是一款能够帮助你自动填写表单并保存的插件。当你在chrome中安装了iMacros for Chrome插件之后,该插件就会帮助你自动记忆你输入的表单内容,并在下次输入的时候,它会将这些重复的操做进行恢复,从而帮助你提升填写表单的效率,节省你的时间。
可能有时会遇到几个会阻碍正确记录macros的问题,可是能够经过关闭对话框再从新打开或刷新页面来很容易的把问题解决掉。
20. Resolution Test
当前评分:4/5颗星
chrome的扩展程序Resolution Test,用于浏览器的分辨率测试。对于作前端开发来讲很是方便。
21. IE Tab extension
当前评分:4.5/5颗星
咱们能够经过使用IE浏览器中的IE Tab extension来显示网页。这一工具使你可以使用Java、ActiveX、Sharepoint、Silverlight等来测试你的网站在不一样版本的IE下会不会退出Chrome。不过IE Tab extension仅在Windows中起做用。
22. IE Tab Multi
当前评分等级:4.5/5颗星
用IE Tab Multi能够检查出你的应用程序或网站在IE浏览器中的显示。IE Tab Multi是产生与IE行为结果最类似的工具,它也让你可以运行ActiveX控件。可是它只支持Windows,并且在Windows 8中它只支持桌面模式。
23. Validity
当前评分等级:4/5颗星
你经过在浏览器的地址栏中单击图标来用Validity拓展器快速验证你的代码。使用Validity只需单击工具栏中的图标便可验证当前HTML文档,不须要离开页面。
24. YSlow
当前评分:4/5颗星
YSlow是一款基于FireFox的插件,这个插件能够分析网站的页面,而且它会告诉你为了提升网站性能,你应该如何基于某些规则对网站进行优化。
25. Chrome Daltonize!
当前评分:4/5颗星
用Chrome Daltonize!能够测试你的应用程序和网页对于色盲的可用性。Chrome Daltonize!用两个不一样的过滤器,让你能够想象到元素是如何出如今色盲的人面前的。
26. Check My Links
当前等级:4/5颗星
对于一个Web开发人员来讲,基本上每次完成页面后都要检查一下页面中的每一个连接是否都已经设置了超连接。这时你就须要Check My Links了。你只须要在你想要检查的网页上点击Check My Links的图标,它就会自动开始进行检查。未检查的连接呈黑色,活链则是绿色,而死链的话就会是红色高亮显示。这些在页面的右上角会有统计显示,里面会显示当前的检查进度、活链数量以及死链数量。
27. After the Deadline
当前评分等级:4/5颗星
After the Deadline使用人工智能来评估你的拼写、风格和语法,你只须要简单的在可编辑区域右下角点击图标ABC就能够完成对拼写、语法和风格评估。
28. Awesome Screenshot
当前评分等级:4.5/5颗星
Awesome Screenshot是一个易于使用的扩展工具,它能够快速抓取任何你想要共享或保存的屏幕截图,而且它能够抓取全屏或部分屏幕,你还能够在共享以前添加备注和注释、发表评论、模糊我的或敏感信息等。
29. Clipular
当前评分:4/5颗星
clipular是另外一个用于抓取屏幕的Chrome扩展工具,它本质上是一个有书签功能的屏幕截图工具。像Awesome Screenshot同样,clipular也能够快速抓取任何你想要共享或保存的屏幕截图并会在Google Drive自动保存你的剪辑。
使用clipular时你能够双击ALT,点击拖动你想要捕获的屏幕区域而后会出现几个选项,包括:分享、下载和备份到谷歌驱动器等。
30. Bukket
当前评分等级:4.5/5颗星
bukket是一个很是好用的Chrome拓展器。它能够截图并对屏幕进行录像。并且Bukket让“用一个简单、可靠的视觉书签工具从你的浏览器中捕捉和记录GIF动画”成为可能。
31. Marmoset
当前评分等级:5/5颗星
Marmoset能够在短短几秒钟内帮助你制做代码截图、输出线框和标记代码。此外,你能够将作好的代码截图等添加主题和其余效果做为snapshots放在你的我的介绍中。
32. Web Timer
当前评分:4.5/5颗星
使用Web Timer能够看到你是如何利用上网时间的。它会跟踪记录你常使用的标签,并会每三分钟更新一次,让你清楚地知道你在哪里投入或浪费的时间最多。你的数据会显示在一个直观的饼图中,方便你很直观的看出你的时间分配,有助于你更好的进行回顾,从而在接下来上网时提升你的注意力和效率的。
33. Lorem Ipsum Generator
当前评分等级:4/5颗星
使用Lorem Ipsum Generator建立虚拟文本,并把虚拟文本放置在你的网站或应用程序中既快速又方便,还避免了重复的剪切和粘贴工做。Lorem Ipsum Generator的目的就是使这一过程更简单、快速。另外,想要使得Lorem Ipsum用起来更快,有时候是须要刷新一下的。
34. Linkclump
当前评分:5/5颗星
Linkclump 是一款用来批量打开网页中多个连接的扩展工具,你只须要用鼠标拖动框选全部想要打开的连接,这样就能在 LinkClump 的新标签页、窗口中一次性打开它们,同时你还能够将它们保存为书签,复制到剪贴板等等。Linkclump的源代码能够在GitHub上找到,使用它会使你对任何项目的研究更加有效。
35. AutoPagerize
当前评分等级:4/5颗星
使用AutoPagerize可让你在一个页面中加载分页面,这个方便且直观的小工具使Web浏览更加高效。
36. Session Manager
当前评分等级:3.5/5颗星
Session Manager使你能够在任什么时候候快速简便地保存当前的浏览器状态,而且它容许你在须要时当即将全部选项卡从新备份。同时Session Manager也有助于将网站进行分组,例如:收集社交媒体配置文件、与某些项目相关的选项卡等。
37. LastPass
当前评分:4.5/5颗星
若是你在每个站点设置的密码都是不一样的,你可能记不住须要使用的那么多站点的密码和登陆帐号。而若是使用LastPass,你只要记住的是一个单一的、安全的密码,就能解决上述问题。
38. Tab Resize
当前用户评论:4/5颗星
经过Tab Resize能使你在单独的窗口中将当前选项卡调整到右侧,Tab Resize经过分屏使工做更加便利,并提供多显示器支持。
你可使用Tab Resize从新调整全部选项卡的大小,并在屏幕上有组织地排列它们。而且你还能够经过Tab Resize来模拟多监视器设置。