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?—?快速修改网站样式。

阅读原文请点击此处

关注微信公众号,每天推送你意想不到的技术文章

时间: 2024-10-12 13:44:46

29个前端工程师和设计师必备的Chrome插件的相关文章

56本前端工程师必备的javaScript学习书籍

分享56本前端工程师必备的javaScript学习书籍(包括了pdf,chm,doc) 1.JavaScript权威指南(第6版)(中文版)2.深入浅出Javascript.O‘reilly.Head.First.Javascript.Jan.20083.JavaScript王者归来月影扫描版4.JavaScript.DOM高级程序设计贝斯扫描版5.精通javascript(图灵计算机科学丛书)6.JavaScript面向对象15分钟教程7.原型.作用域.闭包的完整解释8.Javascript面

前端工程师必备技能

前端工程师必备技能 金刚 前端 前端工程师 今天在技术群里看到几张讲前端的图片,好棒,记录下.以后慢慢扩展相关领域. 前端技术汇总.jpg 前端工程师所需要掌握的技能.jpg 前端工程师所需要掌握的技能.jpg

sublime text3 --前端工程师必备神器

sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题解决方案 如何使用自定义的快捷键快速在浏览器中打开html文件 sublime text3 下载安装与 Emmet插件的安装 对于前端工程师来说,sublime text3绝对是神器,Emmet插件通过自动补齐可以大大提高我们的开发效率. 第一步:进入 官网 下载sublime text3.比如对于

前端工程师必备技能汇总

首先,看一张前端知识结构图:  (原文: ithomer) 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目). 前端开发知识结构 前端工程师 浏览器 IE6/7/8/9/10/11 (Trident) Firefox (

前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)

为了让自己更像一个前端工程师,决定从开发环境开始武装自己.本文将介绍前段工程师开发的一些利器的安装步骤,主要包括了: 1.Node.js的安装 2.Grunt的安装及常用插件 3.Sublime Text的安装及必备插件 一.Node.js的安装 Node.js就是一堆前端工程师捧红的,所以装上这个嘛,主要不是自己需要使用Node.js而是一堆工具对他的依赖. Windows下安装步骤很简单: 1.去到http://nodejs.org/下载最新的安装包,安装. 2.在CMD下运行,node和n

sublime text3 --前端工程师必备

sublime text3 --前端工程师必备神器 导读目录: 下载与Emmet插件安装 sublime text3 中cssrem安装与使用 sublime Text 3的中文文件名显示为方框的问题解决方案 如何使用自定义的快捷键快速在浏览器中打开html文件 安装jade的高亮插件 安装ejs的高亮插件 颜色样式选择 显示与修改编码 安装vue的高亮插件 解决jsx文件中的html标签无法自动补全的问题 Sublime中使用typescript(支持报错) sublime text3 下载安

设计师遇到前端工程师

作为互联网产品设计师,在和前端开发人员沟通时有没有想过这样的疑问: ——圆角阴影实现起来真的有那么难吗? ——载入更多的东西用户可以得到更多的信息,但是页面慢了该如何取舍呢? 面对这些问题,除了要重新考虑自己的设计,有没有想过是什么原因导致出现这样沟通偏差,有没有解决的办法呢?设计师需要了解哪些知识才能和前端开发人员来更好的合作呢? 首先得从这两者之间都有哪些不同说起.我认为最主要原因在于设计师和前端开发在部门中不同的职责划分.通常情况下,产品设计师的产出物多是线框图(wireframe),视觉

【PS切图】前端工程师必备,但又无需精通的一项技能。

前端主要从事一些代码开发工作,PS使用是前端工程师必备,但又无需精通的一项技能. 前端切图四大面板:在“窗口”菜单下开启 1,信息(手动开启)2,字符(手动开启)3,历史记录(手动开启)4,图层(默认开启) PS首选项设置: 编辑->首选项->单位与标尺,选改为像素. PS 技能需求.工具需求: 常用快捷键 图片格式 ( PSD | JPG/GIF/PNG) JPG/GIF/PNG的应用 PSD测量注意事项: 文字右方和下方会有1像素的默认间隙:

web前端工程师必备技能汇总

web前端知识结构图. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个github项目.我们可以通过协作的方式来共同维护这个项目.Git的历史记录也可以见证前端行业的一些变迁. 尽管会变成文字的方式来维护这些内容,但是我承诺写一个小工具帮大家生成更好玩的图形(基于DataV项目). 前端开发知识结构 前端工程师 SVG/Canvas/VML SVG: D3/Raphaël/Snap.svg/DataV Canvas: Cre