上一篇： «
下一篇： »

　　Bookmarklet(书签工具)是节省网页设计/前端开发时间的最佳工具。仅需点击一下，它就能提供很多信息或帮助。Bookmarklet是使用一段Javascript代码编辑而成的书签，当你在浏览器中点击已经预存的Bookmarklet(书签工具)时，其中的Javascript程序就会运行，从而起到书签相应的辅助功能。

　　今天暴风彬彬要向大家推荐15个有助于网页设计/前端开发的Bookmarklet，他们的功能涵盖了:

  • 了解颜色的运用。
  • 为网页插入标尺。
  • 在未重载网页的情况下重载CSS
  • 修改网页元素等功能…

Bookmarklet使用方法:您可以用鼠标将”使用”链接拖到书签栏中(适用于FF、Chrome)，在IE中可以右击”使用”链接，选择”添加到收藏夹”就可以了，记得添加以后重新命名哦。如果没有”使用”链接，那么您可以点击相应链接到该工具的作者网站寻找添加的链接。

点击这里下载适用于导入Firefox的书签文件夹。(点击FF的”书签”–>”管理书签”–>”导入&备份”–>选择导入下载的html文件即可)

提示:如果您很少或不习惯使用这种Bookmarklet工具，您也可以考虑使用Firefox的Web Developer工具栏(扩展)，它包含了部分Bookmarklet的功能，也是非常棒的网页开发辅助工具。

您还可以参考以下网页设计/前端开发相关资源:
《推荐12款可用于前端开发的免费文本编辑器》
《Web前端开发必备手册下载》 
《推荐3个网页设计在线配色网站》
《10个非常棒的Ajax及Javascript实例资源网站》
《20个免费的SEO网站分析工具》 

1.WTFramework

用于学习JavaScipt框架的Bookmarklet工具

wtf-bookmarklet

　　当你好奇某个网站在使用哪个JavaScript框架的时候，相比查看网页源文件，点击以下书签就能查看网站使用的什么JavaScript框架要容易得多。

2.XRAY

查看任何网站元素的细节。

xray-bookmarklet

　　它能让你查看任何元素的详细和模型细节，可以说是学习XHTML+CSS的很好的工具。

点击一下它你就能得到一下答案:

  • 这个元素的上面和左面在哪？
  • 每个元素的margin有多大?padding有多大？
  • 内容区有多大有多高？

3.MRI

web-dev-bookmarklet

　　这个工具可以帮助你测试网页中的选择器，你可以使用选择器来选择网页中的元素，然后会在网页中高亮您选择的元素。

4.Design

网格、标尺、距离测量、鼠标定位

Design主要由下面几个功能组成:

  • Grid - 一个高度可配置的布局网格可覆盖在任何网站上面. 包含一系列丰富的可设置尺寸, 可以用来在浏览器中进行简单的CSS布局开发。
  • Rule - 在网页上显示标尺, 可以实现所有桌面标尺类程序的功能。
  • Unit - 可以测量网页中两点之前的值, 给出点的基准信息后，可在页面中绘制一条直线进行测量。
  • Crosshair - 在页面中显示十字光标方便进行布局调整.

5.Slayer Office

这一个Bookmarklet集成了很多方便的工具。比如”查看网页使用的颜色”、”文档树形图表”等…

6.Aardvark

web-elements-bookmarklet

　　Aardvark可以让你查看网页元素的细节，还可以干更多的事情，如:

  • 从页面中删除选中的元素
  • 隔离某个元素
  • 移动选择的巨型范围内的元素等…

提示:这个书签工具显示在网站的右侧

7.ReCSS

重新加载CSS

　　一个非常简单但又很有帮助的Bookmarklet。当你在为网页编写CSS文件的时候，想要查看最新的网页结果，通常都要重新刷新网页，有的时候由于缓存问题，网页无法显示最新修改的CSS样式。有了ReCSS工具，您将不再有这样的烦恼，只要点击这个书签，就可以重新加载CSS文件。它对于开发Ajax应用也很有帮助。

8.Edit Any Website – 使用

edit-any-website

　　你想知道在网页上添加一行文字是什么样？或者想看看如果没有某个图片会是什么样？这个Bookmarklet可以使网页可编辑，可以修改文本，或重新定位元素。

9.W3C Markup Validator – 使用

xhtml-validate-bookmarklet

　　这个不用过多介绍了吧？就是用来检测网页的XHTML/HTML标记是否符合W3C标准的Bookmarklet工具。

10.W3C CSS Validator – 使用

css-validation-bookmarklet

　　用来检测网页中CSS是否符合W3C标准的工具。

11.Resize Browsers

resize-bookmarklet

　　网页前端开发过程中总要考虑网页在不同的分辨率下的显示效果，这个工具可以让你在不修改显示器分辨率的情况下，让浏览器的尺寸变成相应的分辨率尺寸，方便了许多。

12.BuiltWith – 使用

uiltwith-bookmarklet

　　这个Bookmarklet可以让你赚到BuiltWith网站并让你了解一下信息:

  • 网站所属的服务器
  • 分析应用
  • 脚本语言
  • 安装的widget
  • 博客软件
  • 广告平台等等…

13.Super Screenshot – 使用

立即截屏

screenshot-bookmarklet

　　当你需要对网站进行截图的时候，可以考虑使用这个方便的Bookmarklet。

14.BrowserShots – 使用

测试网页在不同浏览器下的效果

browsershots-bookmarklet

　　您只需点击这个Bookmarklet，便可以将该网页的URL发送到BrowserShots网站，并进行不同浏览器的测试。

15.Google Translate – 使用

google-translate-bookmark

　　这个Bookmarklet虽然与网页设计/开发没多大关系，但我想大多数中国人都会使用它的，呵呵。

　　彬Go会经常更新前端开发/网页设计等相关技术教程及资源，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

英文原文:15 Must-Have Bookmarklets For Web Designers And Developers 
翻译原文:15个前端开发/网页设计师必备的Bookmarklet

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/15-bookmarklets.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

相关日志