对Web设计和开发人员有用的15个Chrome插件

导读:原文作者Brian在freelancefolder.com发表了一篇《15 Useful Google Chrome Extensions for Web Designers and Developers》,由伯乐在线敏捷翻译组编译,文章介绍了非常有用的15个Chrome插件。以下是全文:

最近我才把谷歌浏览器设为默认浏览器,而与此同时我开始将它用于我的兼职Web设计和开发项目中。由于我所依赖Firebug的插件,在Chrome浏览器并没有完全的对应插件,所以我还是时不时要用Firefox浏览器,但我对谷歌浏览器的速度、屏幕空间的利用及很多方面都很满意。在这篇文章里,我和大家分享我在设计和开发网站时发现的一些最好的谷歌浏览器插件,按字母顺序列出如下。

1.Aviary Screen Capture屏幕截图

Aviary Screen Capture让你能够截取网页的屏幕快照。获得屏幕快照后,用Aviary.com的应用程序在浏览器内编辑那幅快照。基本的图像编辑装置让你能够标记(通过画箭头和长方形)、编辑(裁剪、旋转和调整大小)和获得精确的像素色彩。

其特性包括:

  • 保存在桌面、在线主机、或在其它的Aviary应用程序上编辑
  • 即时截图
  • 能够截取所有网页和图像的任何部分
  • 能够截取整张网页
  • 能够添加看得见的备注,比如箭头、文本及在你截取的图片上标出醒目符号
  • 裁剪截取的图片
  • 调整截图的大小、旋转及翻转截图
  • 智能选择和去除截图的元素
  • 从页面上获得色彩信息
  • 快速启动6个Aviary设计工具,包括图像、标记、矢量、调色板、效果和音频编辑器

2.Chrome SEO搜索引擎优化

Chrome SEO为搜索引擎优化工具提供了方便的路径。这些工具帮助你做每日搜索引擎优化工作,比如竞争分析、关键词分析、反向链接检查及网页排名检查等。

3.Chrome Sniffer嗅探器

Chrome Sniffer使Web开发人员能够在网站上运行的检查web框架∕CMS和JavaScript库。这个插件通过一个图标,显示已检测到的框架。目前,这个插件最多可检测70个流行的CMS和JavaScript库。

4.Eye Dropper滴管

Eye Dropper让你能够从网页或高级颜色选择器上选择颜色。

5.Firebug Lite for Google Chrome

Firebug Lite for Google Chrome并不是Firebug的替代品(这很不幸),也不是浏览器开发人员的工具。想法,你应该和其它工具一起使用。FirebugLite提供了大量的视觉效果,类似于Firebug的HTML元素、DOM元素及箱状模式阴影。FirebugLite还具备其他一些很酷的功能,比如用鼠标检测HTML元素,及实时编辑CSS的特性。

6.IE Tab

借助IE Tab,可以在Chrome Tab上切换显示网页。这个插件对想用IE渲染引擎跨浏览器测试的开发人员很有帮助。(这是Windows系统下的独特插件。)

7.Instant Image Editor 即时图像编辑器

当你按住alt键(Linux上的ctrl键)的时候,Instant Image Editor让你在有背景图像的网页上可以右键点击任何图像或元素。你可以用Pixlr在新标签上即时编辑图像,Pixlr是在浏览器上运行速度快、使用方便的程序。当你右键点击的元素不是图像时,即时图像编辑器也会确定这个元素是否有可供编辑的背景图像。

8.Lorem Ipsum Generator

Lorem Ipsum生成器用简约和极具吸引力的设计随机产生“Lorem Ipsum”文本。

9.MeasureIt!

MeasureIt!用于测量网页上任何元素的宽度和高度。

10.Pendule

Pendule是Chrome为Web开发人员提供的开发工具。这个内置的开发工具的插件包括:查看、重装和禁用CSS,查看JavaScript、表格编辑,查看、隐藏及获得图像的信息,颜色选择器、量尺、地形图、标记验证器等等!

11.PHP ConsolePHP控制台

PHP Console是Lagger的一个插件,(Lagger:PHP处理错误/异常/调试的轻量级灵活的开源PHP库),它在谷歌浏览器控制台及弹出窗口中显示PHP错误/调试的信息。

12.Speed Tracer速度追踪器

Speed Tracer 速度追踪器帮助你在网站应用程序中发现和修复性能问题。当应用程序运行时,这个插件将浏览器内的低水平检测点可视化,并分析它们。

这个应用程序帮助你了解在你的应用程序里时间都花在哪了。这包括由以下原因导致的问题:

  • Javascript的解析和执行
  • Layout 版面
  • CSS样式重算和选择器匹配
  • DOM事件处理
  • 网络资源加载
  • 定时器
  • XMLHttpRequest 回调
  • 绘图
  • 其它

13.Web Developer

Web Developer 在浏览器中增加了一个工具栏,其中有Web开发工具的按钮。

14.Webpage Screenshot网页快照

Webpage Screenshot是快速、简单的插件,它能截取整个网页。即使网页很长,也能存储在一份图像文件里。这个插件让你只点击一下,就能以PNG/JPG格式存储任何网页的图像。

  • 有绘图工具:线条、椭圆、长方形、箭头等
  • 在屏幕快照中添加文本
  • 按所需尺寸快速裁剪图像
  • 在准备好图像之前就能开始编辑
  • 可以上传到Facebook、Twitter、Gmail、MySpace上共享
  • 打印:直接发送图像到打印机
  • 存储在硬盘里:这个独特的插件让你能够将大的图片存储在硬盘里
  • 能够截取本地文件:能够截取“FILE://”
  • 附有颜色选择器:能够记住你最后使用的颜色
  • 也能够截取水平网站的网页

15.Window Resizer窗口大小调整器

Window Resizer能够重新调整浏览器窗口的大小以适合各种分辨率。这个插件对网站设计和开发人员特别有用,能够帮助他们在分辨率不同的浏览器上测试版面设计。分辨率清单是完全能够定制的(增加/删除/重新排序)。

可以提供三种屏幕类型:

1.台式电脑(标准的;按具体的分辨率情况重新调整整个窗口的大小)

2.手提电脑(和台式电脑一样,但图标不同;很容易扫描分辨率清单)

3.手机Mobile(和前两种屏幕不同;适合具体的视图尺寸,不会占满整个窗口,因为手机的浏览器通常没有边界)

原文链接:15 Useful Google Chrome Extensions for Web Designers and Developers

译文链接:对Web设计和开发人员有用的15个Chrome插件

时间: 2024-10-27 05:08:15

对Web设计和开发人员有用的15个Chrome插件的相关文章

8个对于Web设计和开发人员非常有用的在线工具

导读:作者Henry Jones写了一篇<8 Useful Online Tools for Web Designers and Developers>,现将译文<8个对于Web设计和开发人员非常有用的在线工具>转载,以下是文章内容: 在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率.本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助. ProCSSor ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美

对Web开发人员有用的8个网站小结_相关技巧

1. Min.us: 上传图片的最简单方 开发人员有用的8个网站小结_相关技巧-web前端开发培训小结"> 任何开发人员.设计师.网络管理员都必须跟客户和同事在线分享图片.Min.us的全部服务就是让你极度简单地上传图片:只需把图片拖拽到Min.us的网页里,图片就会保存在服务器上.并且自动生成短网址,这样你就可以通过这个网站分享图片了. 访问Min.us 2.Wirify:把任何网页转换成线框图 设计网站时线框图非常有用.Wirify是一个可以把任何网页立刻转换成线框图的书签工具,这样你

Web设计和开发:2012年Web设计和开发的趋势

文章描述:2012年Web设计和开发的15个趋势. Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势. 2012看来注定是有趣的一年.经济的下滑继续广泛地打击行业,看不到结束的尽头.政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司. 对网页设计和开发,2012还是比较混乱的一年.我们处于很多小矛盾当中:移动贪婪地占领市场份额:原生App威胁开放的互联网:收费墙阻碍曾经免费的信息:合作与分裂的冲突:复古(Skeuomorphism)的交互模式挑战创新

Web设计和开发常犯的9个用户体验错误和解决方法

一个烂网站就像一个性情乖戾的推销员,这样的推销员不仅无法说服顾客,而且让人生厌,就网站而言,再也没有什么比蹩脚的用户体验更让人沮丧的了.本文讲述了 Web 设计与开发中常犯的 9 个用户体验错误以及它们的解决方法. Web 用户体验大师 Jacob Nielsen 说过,"一个烂网站就像一个性情乖戾的推销员",这样的推销员不仅无法说服顾客,而且让人生厌,就网站而言,再也没有什么比蹩脚的用户体验更让人沮丧的了.本文讲述了 Web 设计与开发中常犯的 9 个用户体验错误以及它们的解决方法.

2012年Web设计和开发的15个趋势

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势. 2012看来注定是有趣的一年.经济的下滑继续广泛地打击行业,看不到结束的尽头.政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司. 对网页设计和开发,2012还是比较混乱的一年.我们处于很多小矛盾当中:移动贪婪地占领市场份额;原生App威胁开放的互联网;收费墙阻碍曾经免费的信息;合作与分裂的冲突;复古(Skeuomorphism)的交互模式挑战创新的设

RESTful API设计给开发人员带来怎样的未来?

业界正在逐渐承认RESTful API优于面向服务架构.但是这对于架构师和开发人员而言到底意味着什么?Tom Nolle分享了他的想法. 在模块化应用世界里,最为持久的争论莫过于面向服务架构和表述性状态转移之争了.本文探讨这样的争论带来了什么及其背后的原因. SOA已经被定性为连接组件和工作流的严格的且重量级的方案,REST则赢得了更多的赞誉.两者的特征都是简化,但是要学习RESTful API设计,架构师和开发人员必须理解SOA和REST之间的差异,学习REST和云以及微服务一起的演进,并且了

对前端开发人员有用的在线工具

在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率.本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助. ProCSSor ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美观. jsFiddle JsFiddle有多种用途,其中一个用法就是可以在线编辑HTML, CSS 和JavaScript片段,而且代码可以分享,还可以嵌入到你的博客中等等. Frame Box Frame Box是一个非常好用的用于在线分享线框图(

Web 设计与开发者必须知道的 15 个站点_相关技巧

 ColorCombos 开发者必须知道的 15 个站点_相关技巧-汇付天下开发者站点"> 配色是 Web 设计的首要大事,Color Combos 帮你预备了数千种配色方案,可以根据色调浏览选取.LIpsum Lorem Ipsum Text 是一中自造的,字典中不存在的单词,是在演示页面结构的时候,需要加文字的地方使用 Lorem Ipsum Text 填充可以避免用户因关注文字的意思而分神.Lipsum.com 可以帮你生成制定数目的 Lorem Ipsum 单词.What the

对Web开发人员有用的8个网站

译文出自:伯乐在线---敏捷翻译组---魏哲