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翻译即可快速翻译你正在查看的页面。
延伸阅读:
- 12款Firefox翻译类扩展
- Jollo: 社会化的翻译社区
- 10款在线翻译工具
- 7款Wordpress翻译插件
- Google翻译界面小改动
- Google翻译服务新增加10种语言包
- 小试谷歌金山词霸合作版
英文原文: 15 Must-Have Bookmarklets For Web Designers And Developers/WebResourcesDepot
翻译: 15个设计开发必备的Bookmarklet/帕兰映像
没有评论:
发表评论