15个前端开发/网页设计师必备的Bookmarklet - analyzer

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应用也很有帮助。