15个设计开发必备的Bookmarklet

Bookmarklets 如果使用得当,将能够节省你的很多时间. 只需要一键点击,它们就能提供给你丰富的信息和帮助。 什么是Bookmarklet呢?简单地说,就是把一段特定功能的JavaScript代码保存至收藏夹,当你需要的时候点击这个收藏快捷方式,实现这段 JavaScript代码的功能。因为现在的浏览器地址栏都支持JavaScript,所以使用Bookmarklet可以方便的实现你常用到的功能(via)。

刚已经介绍了一个让人不爽的Bookmarklet – Design, 下面是15个设计开发相关的Bookmarklet,值得每个设计师和开发员放进自己的浏览器书签栏。

WTFramework -学习JavaScript框架

当你想知道 某个网站使用哪个JavaScript框架时,是jQuery 还是MooTools? 与其查看源代码,不如使用WTFramework来为你检测和显示.

XRAY – 查看任何网页元素的细节

这个Bookmarklet 可以让你查看网页中任何元素的箱状模式细节,包括:

  • 元素的顶部和左边在哪里?
  • 各自的margin值是多少? padding值又是多少?
  • 内容框的宽和高是多少?

MRI

一个免费跨平台的工具让你测试任何网页的选择器,选择器在些嵌套复杂的网页并不容易找出 – MRI 能够帮助你。

Design – 测量调试工具

Design 主要包含四个功能选项

  • Grid: 在网页上显示网格配置
  • Rule: 在网页上显示标尺
  • Unit: 测量不同两点之间的距离
  • Crosshair: 显示一个十字光标标记出当前位置的坐标值

Slayer Office


这个bookmarklet包含一系列的工具. 比如颜色列表,文档树图表,HTML属性查看,HTML头部响应查看,隐藏字段修改工具,Javascript对象树等等。

Aardwark – 显示元素等

Aardwark 可以让你查看Web页面上元素的细节并进一步得到更多的操作:

  • 从页面上删除选择的元素
  • 使元素独立等

ReCSS – Reloads The CSS

一个非常简单但却非常有用的 bookmarklet.

当编辑一个CSS文件, 并要查看结果的时候,所有修改过的页面要重新刷新.而 ReCSS 则只是快速的晚新修改过的CSS和显示其结果.

如果你是在开发 一个 Ajax应用,这会显得尤其有用。

Edit Any Website – 点击获取这个Bookmarklet

这个 bookmarklet让任何页面具有可编辑性,你可以定位元素或文本,实时查看修改效果。

W3C Markup Validator – 获取它

W3C的HTML标记验证Bookmarklet

W3C CSS Validator – 获取它

W3C的CSS验证Bookmarklet

Resize Browsers

当你测试一个设计的时候,经常需要在不同的浏览器分辨率下面进行测试,通过电脑调的话不太方便。使用这个Bookmarklet,一键点击即可改变浏览器的尺寸到一些常用的尺寸。

延伸阅读: 完全自定义Firefox浏览器窗口大小的方法

BuiltWith – 查看网站信息 – 获取它

这个 bookmarklet 可以让你查看一系列的网页信息,包括:

  • 网站的web服务器
  • 使用哪种统计工具
  • 脚本语言
  • 安装了哪些widgets
  • 使用什么博客软件
  • 使用哪个广告平台等等

Super Screenshot -即时截屏 – 获取它

可以实现快速截取整页屏幕的Bookmarklet,也可以按照你自己定义的尺寸进行截取。

延伸阅读:

BrowserShots – 在不同的浏览器中测试网页 – 获取它

这个 bookmarklet让你在同一操作系统/同一浏览器中可以进行跨平台的浏览器测试。

延伸阅读:

Google Translate – 获取它

这并不是一个直接的设计开发工具。但对于很多设计师和开发者来说,经常搜索查找的一些东西,并非本国语言或自己熟悉的语言,一个翻译工具是很有必要的,除非你精通各国语言。这个Bookmarklet让你不需要进入Google翻译即可快速翻译你正在查看的页面。

延伸阅读:

英文原文: 15 Must-Have Bookmarklets For Web Designers And Developers/WebResourcesDepot

翻译: 15个设计开发必备的Bookmarklet/帕兰映像

发表评论

电子邮件地址不会被公开。 必填项已用*标注