29个前端工程师和设计师必备的Chrome插件
2015-12-08 09:00:07 | 来源:玩转帮会 | 投稿:佚名 | 编辑:小柯

原标题:29个前端工程师和设计师必备的Chrome插件

  Google Chrome是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器。今天,我来分享下自己收集的一系列Chrome插件,希望能够提高大家的工作效率。

  Devtools Terminal—嵌在浏览器中的终端。开发调试利器!

  LiveReload—集成LiveReload官方应用(Mac和Windows)以及guard-livereload、yeoman等第三方工具。帮助开发者快速构建Web应用。

  BrowserStack Local?—?本地测试工具,借助它可以快速完成本地/内部服务器配置和测试工作,以及HTML、CSS、JavaScript静态文件的配置和测试。用BrowserStack提供的安全、便捷的云服务,在700多个真实的桌面系统和移动浏览器中,测试应用的布局、工作流和交互性。

  JSONView?—用来验证和查看JSON文件。

  Postman?—接口调试工具。接口编写、调试、文档撰写过程使用它能提升工作效率。有100多万用户了。

  Window Resizer?—调整浏览器窗口大小,模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。

  WhatFont?—?识别网页所使用的字体。

  Page Ruler?—获取任意网页中元素大小、位置信息。

  Web Developer Checklist??—?自己的网站是否符合Web设计、开发的最佳实践?对照这份清单,就能很容易发现网站是否有问题。

  Image Downloader?—?查看和预告网页中的图像。

  Alexa Traffic Rank?—?Alexa Internet为Chrome开发的免费网站流量排名查看工具。在不干扰用户访问网站的情况下,给出当前网站的Alexa数据。

  Eye Dropper?—?开源拾色器软件,可以从网页、其他拾色器和你用过的颜色中拾取颜色。

  Firebug Lite?—?它可不是用来替代Firebug或Chrome的开发者工具,而是配合这些工具来使用。你可以像使用Firebug那样,用它来查看HTML、DOM元素和盒子模型。它还能提供其他比较酷的功能,比如用鼠标查看HTML元素,编辑CSS属性后能立马看到效果等。

  Web Developer?—以工具栏形式提供一系列Web开发工具, 这是Web Developer官方为Chrome开发的版本,他们也为 Firefox、Opera开发了相应插件。

  Responsive Inspector?—用于查看被访问网站的媒体特性(media query)。开发响应式Web布局时,可以直观地显示CSS样式表所定义的分辨率的效果。

  BuiltWith?—?用于查看当前网站使用什么技术搭建。

  Corporate Ipsum?—?随机生成企业相关信息,作为占位文本,方便查看布局效果。

  User-Agent Switcher?—?修改用户代理(User-Agent)字符串,以伪装成某些浏览器和操作系统,还可以伪造特定的URL。

  YSlow?—?分析网页,根据能够提高网页性能的一组规则,提出性能改进建议。

  CSS Shapes Editor?—?在所选中元素上方显示交互式编辑器,用于新建和调整用CSS写的图形。

  Pesticide?—?在当前网页插入Pesticide CSS,为元素添加明显的边框,方便查看元素位置。

  Responsive Web Design Tester?—测试移动网站在移动设备上的效果。该插件能够模拟不同尺寸、装有不同浏览器的移动设备。

  Palettab?—?安装后,新开一页卡,就能看到5种颜色和字体搭配方案!每次点击新页卡,就能有新发现。

  jQuery Audit?—?在元素面板创建侧边栏,显示jQuery委托代理事件、内部数据、当前选中的DOM节点、函数和对象等信息。

  Font Changer?—修改包括Facebook、Twitter、Google、Youtube在内的任意网站的字体。可以试试Google Web Fonts?字体的效果。

  HTML5 Outliner?—?使用网页中的标题和分区信息,创建可点击的大纲视图。

  PerfectPixel?— 在页面上显示半透明的图像,便于逐像素对比调整前后的页面效果,以达到最佳水准。

  SelectorGadget?— 有了这个开源工具,为复杂网站的元素生成CSS选择器,以及查看选择器所匹配的元素都将变得轻而易举。

  Stylebot?—?快速修改网站样式。

  原文:medium.com 译文:http://get.ftqq.com/8215.get

tags:

上一篇  下一篇

相关:

iPhone7掉落时自带降落伞….惊呆了!

请升级至最新版本阅读此文进入“设置–版本”中检查最新版本并升级【免责声明:本文自互联网收集而来,

为了防止学生作弊,这些年老师操碎了心

说好的信任呢!?本文来自腾讯新闻客户端自媒体,不代表腾讯新闻的观点和立场。【免责声明:本文自互联网收

那些逗逼老师们!哈哈,你们够了!

那些逗逼老师们!哈哈,最后一个, 你们够了!好有爱本文来自腾讯新闻客户端自媒体,不代表腾讯新闻的观点和

说真的,我很怀念我姐小时候!

这已经算女大七十二变了!本文来自腾讯新闻客户端自媒体,不代表腾讯新闻的观点和立场。【免责声明:本文自

如何正确地回答“你是不是傻!”?

请升级至最新版本阅读此文进入“设置–版本”中检查最新版本并升级【免责声明:本文自互联网收集而来,

选股大数据统计分析图(截至12月7日)

假如你想成为全栈工程师…

  让我来发挥一下剪报君的特长,下面是百度百科对[全栈工程师]的说明: 全栈工程师,也叫全端工程师,英

如果把游戏比作美女,国产的美女声线都不太好

说到我痛处了:作为在日本的游戏开发经验者想发表点感受不知道有多少人在国内游戏行业内接触过「音频组 (So

在MacBookPro上设置Java开发环境

好吧,我去了地球的另一边,并且因为我的PC不在旁边,只有一台MacBook Pro可以用于开发。这篇文章应该被看作

8个3D视觉效果的HTML5动画欣赏

现在的网页中应用了越来越多的3D应用,特别是基于HTML5 Canvas的动画特效,让用户有一种非常震撼的视觉体验

站长推荐: