前端程序员必知的30个Chrome扩展

jopen 7年前

前端程序员必知的30个Chrome扩展

英文原文:Useful extensions for Front-End Developers and Designers

谷歌 Chrome 浏览器是网络上可用的最好的浏览器之一,并且自 2011 年 11 月超越了 Firefox 浏览器之后,已经成为了互联网上占主导地位的浏览器。今天,我想与大家分享一些最实用的谷歌 Chrome 浏览器扩展,可以帮助你提高工作效率。

前端程序员必知的30个Chrome扩展

Devtools Terminal ——浏览器终端。牛逼的不得了!

LiveReload——为官方 LiveReload 应用程序(Mac 和 Windows)和第三方,例如 guard-livereload 和 yeoman,提供 Chrome 浏览器集成。

BrowserStack Local ——本地测试 app 可以让你即刻配置和测试本地/内部服务器,和包括 HTML、CSS 和 JavaScript 文件在内的本地文件夹。在 BrowserStack 上的安全云设置中测试布局,工作流程和交互性,跨越 700+ 个真正的台式机和移动浏览器。

JSONView ——验证和查看 JSON 文件。

Postman——用 Postman 为 API 工作流程增加负荷!更快地构建,测试,并记录你的 API。已经不止一百多万的开发人员投入了 Postman 的怀抱。

Window Resizer——该扩展可以重新调整浏览器窗口的大小,以仿效各种不同的分辨率。对网页设计师和开发人员尤其有用,可以帮助测试在不同浏览器分辨率下的布局。

WhatFont——识别网页上的字体最简单的方法。

Page Ruler——画一把尺子以得到像素维数和定位,并测量任何网页上的元素。

Web Developer Checklist ——对于那些想要确保遵循最佳实践的 web 开发人员,这个扩展可以让你很容易发现自己网站的问题域。

Image Downloader——浏览和下载网页上的图像。

Alexa Traffic Rank ——Alexa Traffic Rank 是 Alexa Internet 提供的免费的 Chrome 扩展,并且是 Alexa 流量面板的唯一扩展。这款 Alexa 扩展可以在你网上冲浪的时候陪伴你,提供有关你访问的网站的 Alexa 数据,并且不会中断你浏览网站。

Eye Dropper ——Eye Dropper 是开源扩展,它可以让你从网页,拾色器和个人色彩历史中选取颜色。

Firebug Lite ——Firebug Lite 并非 Firebug 或 Chrome Developer Tools 的替代品。它是使用这些工具时也可以一起使用的工具。Firebug Lite 提供了丰富的视觉表现,这些视觉表现也是我们在 Firebug 中,涉及 HTML 元素,DOM 元素,以及盒模型阴影(Box Model shading)时惯常见到的。它还提供了一些很酷的功能,比如用鼠标检查 HTML 元素,以及实时编辑 CSS 属性。

Web Developer ——添加了一个拥有各种 web 开发工具的工具栏按钮。是 Firefox web 开发扩展的官方端口。

Responsive Inspector —— Responsive Inspector 是一个简单的谷歌 Chrome 浏览器扩展,它允许查看被访问网站的媒体查询。这在开发响应式网络布局时非常有用,因为它可以直观地显示在 CSS 样式表中定义了什么分辨率。

BuiltWith ——使用该扩展,可以找出你正在访问的网站是用什么构建的。

Corporate Ipsum ——作为填充文本使用,生成随机的企业公关说辞。

User-Agent Switcher ——模拟用户代理(User-Agent)字符串。有了这个扩展,你就可以快速轻松地在用户代理字符串之间进行切换。此外,你还可以设置每次要冒名的特定 URL。

YSlow ——YSlow 分析网页,并提出如何在一套高性能 web 页面规则的基础上改进性能。YSlow 在三个预定义规则之一或一个用户定义的规则集的基础上将网页分等级。它提供了改进页面性能的建议,总结了网页页面的组件,显示了关于页面的统计信息。

CSS Shapes Editor ——使用交互式编辑器来创建并调整 CSS Shape 值,重叠所选元素。

Pesticide ——这个扩展可以插入 Pesticide CSS 到当前页,形成每个元素的示意图以便于更好地看到它们在页面上的位置。

Responsive Web Design Tester ——在移动设备上测试移动网站。此扩展反映了移动设备的大小和它的浏览器。

Palettab——将超棒的颜色和字体带给新的标签页!每次点击新标签按钮,都会给你一点点新鲜。

jQuery Audit ——jQuery Audit 在元素面板中创建了一个侧边栏,包含 jQuery 的下放事件,内部数据等,就像活跃的 DOM 节点,函数和对象。

Font Changer——改变 非死book、推ter、Google、油Tube 和其他任何网站的字体。测试 Google Web Fonts™。

HTML5 Outliner——用标题和分节元素生成一个可导航的页面大纲。

PerfectPixel ——此扩展允许开发人员把一个半透明的图像叠加到已开发好的 HTML 的顶部,并在它们之间执行每个像素的比较。

SelectorGadget ——Selector Gadget 是一个开源的 Chrome 浏览器扩展,能够让 CSS 选择器轻而易举地生成和发现于复杂网站。

Stylebot——瞬间改变网站的外观。

-

译文链接:http://www.codeceo.com/article/30-useful-extensions-for-web.html

翻译作者:码农网 – 小峰

来自: www.codeceo.com