FireQuery - 用于jQuery开发的Firebug扩展

openkk 12年前

推荐一个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 onclick="$('h1').data('added-data', 'this value should appear as a mutation event '+new Date())">Add H1 data</button>           <button onclick="$('h1').data('added-data', null)">Nullify H1 data</button>           <button onclick="$('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的按钮）
FireQuery - 用于jQuery开发的Firebug扩展