插件:Firebug扩展插件FireQuery

之前也不知道看了哪篇文章的介绍,在火狐上装了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>

]

3. 引入jQuery.Lint.js对页面代码测试

在Console Tab的下拉菜单中启用引入,重新刷新页面后会动态地引入jQuery.Lint.js插件,此时对页面中出现的错误进行输出提示。

FireQuery对于前端开发和测试来说绝对是一大助手,更多的好处还是在实际中可以体会出来。

官方测试页面:http://firequery.binaryage.com/test

原文地址:https://www.cnblogs.com/yuzhongwusan/p/2332606.html