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

 

自己再增加几个插件

 

Smooth Gestures

 

https://chrome.google.com/webstore/detail/lfkgmnnajiljnolcgolmmgnecgldgeld

 

 

Sexy Undo Close Tab

https://chrome.google.com/webstore/detail/bcennaiejdjpomgmmohhpgnjlmpcjmbg

 

 

Douban Pulse

https://chrome.google.com/webstore/detail/dofcilnakjpenampigbefbbeekanbfgl

 

 

Xmarks Bookmark Sync

https://chrome.google.com/webstore/detail/ajpgkpeckebdhofmmjfgcjjiiejpodla

 

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

 

声明：JavaEye新闻文章的版权属于JavaEye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

　　最近我才把谷歌浏览器设为默认浏览器，而与此同时我开始将它用于我的兼职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的替代品（这很不幸），也不是浏览器开发人员的工具。想法，你应该和其它工具一起使用。Firebug Lite提供了大量的视觉效果，类似于Firebug的HTML元素、DOM元素及箱状模式阴影。Firebug Lite还具备其他一些很酷的功能，比如用鼠标检测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 Console PHP控制台

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

　　可以提供三种屏幕类型：

• 台式电脑（标准的；按具体的分辨率情况重新调整整个窗口的大小）
• 手提电脑（和台式电脑一样，但图标不同；很容易扫描分辨率清单）
• 手机 Mobile（和前两种屏幕不同；适合具体的视图尺寸，不会占满整个窗口，因为手机的浏览器通常没有边界）

　　译文来源：伯乐在线 - 职场博客 - 自由职业者
　　译文链接：http://www.jobbole.com/entry.php/494