之前也不知道看了哪篇文章的介绍,在火狐上装了FireQuery插件,一直没去注意它 的用途。就只发现在FireBug的HTML Tab下的HTML代码层次上多了些事件代码,可以点击查看对应的绑定事件。最近的一些使用,发现了FireQuery的好处,特别是在测试动态生成 DOM以及数据测试上很是方便。
关于FireQuery的简介和安装就不多说了,访问:http://firequery.binaryage.com/。
1. 标签绑定事件查看
打开Firebug的HTML Tab,在一些绑定了事件的HTML标签上可以看到一些事件数据:点击后跳转到DOM Tab,可以查看对应的一些信息:
2. 查看jQuery的.data()函数添加的数据
jQuery的.data()函数是用来给HTML上添加数据的,一般用在插件或数据处理上。一般情况下执行了.data()后,无法确认是否给该 标签正确地绑定了数据。此时通过FireQuery就可以查看,同样支持点击后跳转到DOM Tab查看,这在给HTML标签绑定一些对象数据时非常实用。[下图中黄色counter=33为data数据]
[你可简单测试这个:
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").data('ak',50)
});
</script>
<p>If you click on me, I will disappear.</p>
<script type="text/javascript">
$(document).ready(function(){
$("p").data('ak',50)
});
</script>
<p>If you click on me, I will disappear.</p>
]
3. 引入jQuery.Lint.js对页面代码测试
在Console Tab的下拉菜单中启用引入,重新刷新页面后会动态地引入jQuery.Lint.js插件,此时对页面中出现的错误进行输出提示。
FireQuery对于前端开发和测试来说绝对是一大助手,更多的好处还是在实际中可以体会出来。