FireQuery: Firebug enhancements for jQuery

最新推荐文章于 2016-04-25 16:45:33 发布

卷边书_王诣

最新推荐文章于 2016-04-25 16:45:33 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/banu0907/article/details/82321641

版权

FireQuery: Firebug enhancements for jQuery - banu - 入海数沙

推荐一个FireBug的增强扩展 FireQuery，它可以在任意页面插入jQuery脚本，结合FireBug的命令控制台使用jQuery语法，以方便对jQuery熟悉的开发者调试页面。

不仅如此，作者还给出了一个Demo页面来展示FireQuery的其他作用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</head>
<body>
  <h1>FireQuery test page</h1>
  <div id="header" class="box">
         <p>Hello from header</p>
         <button οnclick="$('h1').data('added-data', 'this value should appear as a mutation event '+new Date())">Add H1 data</button>
         <button οnclick="$('h1').data('added-data', null)">Nullify H1 data</button>
         <button οnclick="$('h1').removeData('added-data')">Remove H1 data</button>
  </div>
  <iframe src="frame1.html"></iframe>
  <iframe src="frame2.html"></iframe>
  <div id="main" class="box">
         <p>Hello from body</p>
  </div>
  <div id="footer" class="box">
         <p>Hello from footer</p>
         <ul class="long-list">
           Here is some long list
           <li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li>
           <li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>
           <li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li>
         </ul>
  </div>
  <script type="text/javascript">
         $('body')
           .data('Firebug', 'makes it possible')
           .data('jQuery', "is pretty damn cool!")
           .data('FireQuery', 'is just a cherry');
         $('p').data('hasData', 'yeah!');
         $('iframe').eq(0).data('framedata', 1);
         $('iframe').eq(1).data('framedata', 2);
         $('#main').data('something more complex', {
           structured: "yep!",
           arr: [1,2,3],
           fn: function(a,b) {},
           nool: null,
           undef: undefined
         });
         console.log($('body'));
         console.log($('.box'));
         console.log($('#footer ul'));
         console.log($('p'));
         console.log($('li'));
         console.log($('#nonsense'));
         
         $(function() {
             var counter = 0;
             setInterval(function() {
                 $('body').data('counter', counter++);
             }, 1000);
         });
  </script>
</body>
</html>

从下面的页面可以看出，首先FireBug会将所有选中的元素 [如：console.log($('.box'));]通过选择器标签罗列出来，其次使用jQuery选择器给元素通过data方法设置存储数据之后，我们可以在控制台中看到如下提示（注： jQuerify就是向页面插入jQuery的按钮）

对于存有数据对象的元素可以看到后面有一个“?”符号表示，点击后转换到Dom对象视图

可以看到存储在元素上的临时数据

转换到HTML视图，我们又看到临时数据附着在元素标签之后

目前FireQuery有如下特征

Features

jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery datas are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any web page

Site： http://firequery.binaryage.com/

Plugin: https://addons.mozilla.org/en-US/firefox/addon/12632

其他FireBug增强扩展： 13 Must-Have Add-ons To Strengthen Firebug

为了您的安全，请只打开来源可靠的网址

打开网站取消

来自: http://hi.baidu.com/freezesoul/blog/item/8c0723a4590669fe9052ee18.html