对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插件

目录
相关文章
|
3月前
|
Web App开发 人工智能 IDE
从痛点到解决方案:为什么我开发了Chrome元素截图插件
传统的截图方式要么截取整个页面然后手动裁剪,要么使用浏览器自带的截图功能,但效果都不理想。特别是当内容包含SVG元素或复杂样式时,截图质量和速度、便捷性往往不尽如人意。
216 4
|
3月前
|
Web App开发 人工智能 前端开发
产品发布策略:如何让Chrome插件在竞争激烈的市场中脱颖而出
Chrome Web Store每天新增很多个插件。插件刚发布,用户只有我自己,如何在这样的红海市场中找到自己的位置,是我一直在思考的问题。
159 0
|
10月前
|
存储 JSON JavaScript
WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
本文介绍了如何使用MxPluginContext动态控制MxCAD项目的UI界面。通过该上下文对象,开发者可以灵活设置UI配置,如控制操作栏显隐、编辑按钮、添加侧边栏等。具体方法包括调用`getUiConfig()`获取并修改`mxUiConfig.json`中的属性,实现界面的定制化。此外,还提供了控制命令行聚焦的功能,解决输入框焦点锁定问题。详细代码示例和效果对比图展示了具体实现步骤,帮助开发者更好地适配项目需求。
|
11月前
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
1097 8
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
3377 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
465 11
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
245 4
|
API 数据库 开发者
解锁Web2py新境界!揭秘如何利用神秘插件系统,让你的Web项目瞬间起飞?
【8月更文挑战第31天】Web2py是一款轻量级且功能全面的Python Web框架,其插件系统允许开发者在不修改核心代码的情况下扩展框架功能,提升项目灵活性和可扩展性。本文介绍如何利用Web2py插件系统增强Web项目,包括插件的优势、选择与安装方法,并通过集成身份认证插件的具体示例展示其应用过程。通过合理利用插件,可以显著提高开发效率和用户体验。
211 1
|
监控 Java Maven
springboot学习二:springboot 初创建 web 项目、修改banner、热部署插件、切换运行环境、springboot参数配置,打包项目并测试成功
这篇文章介绍了如何快速创建Spring Boot项目,包括项目的初始化、结构、打包部署、修改启动Banner、热部署、环境切换和参数配置等基础操作。
1304 0