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

  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
如需转载必须以链接形式注明原载或原文地址,谢谢合作

34 Comments

发表评论