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

简介: 导读:原文作者Brian在freelancefolder.com发表了一篇《15 Useful Google Chrome Extensions for Web Designers and Developers》,由伯乐在线敏捷翻译组编译,文章介绍了非常有用的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插件

目录
相关文章
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
305 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
2月前
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
154 0
|
2月前
|
开发框架 .NET 开发工具
visualstudio如何加入工作插件---Web developer工具
visualstudio如何加入工作插件---Web developer工具
34 0
|
4月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
73 11
|
4月前
|
API 数据库 开发者
解锁Web2py新境界!揭秘如何利用神秘插件系统,让你的Web项目瞬间起飞?
【8月更文挑战第31天】Web2py是一款轻量级且功能全面的Python Web框架,其插件系统允许开发者在不修改核心代码的情况下扩展框架功能,提升项目灵活性和可扩展性。本文介绍如何利用Web2py插件系统增强Web项目,包括插件的优势、选择与安装方法,并通过集成身份认证插件的具体示例展示其应用过程。通过合理利用插件,可以显著提高开发效率和用户体验。
61 1
|
4月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
4月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
341 8
|
4月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
172 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
4月前
|
开发者 Java 安全
Struts 2 实战秘籍:Action 驱动业务,配置文件成就高效开发!
【8月更文挑战第31天】Struts 2 框架作为 Apache 软件基金会的顶级项目,广泛应用于企业级 Web 应用开发。其核心组件 Action 类处理用户请求,而配置文件定义请求与 Action 类间的映射关系。掌握 Action 组件的最佳实践包括继承 `ActionSupport` 类、实现 `execute` 方法及使用类型安全的方法;配置文件的最佳实践则涉及组织 Action 到包中、定义全局结果及使用通配符映射。遵循这些最佳实践,可构建高效、可维护的 Web 应用程序。
47 0
|
4月前
|
开发者 前端开发 Apache
【绝不错过!】揭秘Wicket大神级插件,带你飞越编程极限,探索Web应用开发新大陆!
【8月更文挑战第31天】Apache Wicket是一个成熟的Java Web框架,以其组件化体系结构、直观的API及对MVC的支持著称。其活跃社区贡献了大量插件和扩展,显著提升了Wicket的功能性。本文推荐几个实用插件,如**Wicket Ajax Support**,可轻松添加Ajax功能,提升用户体验;**Bootstrap for Wicket**则将Bootstrap与Wicket结合,美化应用界面。
42 0