FireQuery - 用于jQuery開發的Firebug擴展

openkk 12年前發布 | 64K 次閱讀 jQuery Firebug Web開發工具

FireQuery - 用于jQuery開發的Firebug擴展
推薦一個FireBug的增強擴展 FireQuery，它可以在任意頁面插入jQuery腳本，結合FireBug的命令控制臺使用jQuery語法，以方便對jQuery熟悉的開發者調試頁面。

不僅如此，作者還給出了一個Demo頁面來展示 FireQuery的其他作用  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
";


<html>
<head>
  <script type="text/javascript" src=";
</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></pre>

從下面的頁面可以看出，首先FireBug會將所有選中的元素 [如：console.log($('.box'));]通過選擇器標簽羅列出來，其次使用jQuery選擇器給元素通過data方法設置存儲數據之后，我們可以在控制臺中看到如下提示（注： jQuerify就是向頁面插入jQuery的按鈕） 

FireQuery - 用于jQuery開發的Firebug擴展 



對于存有數據對象的元素可以看到后面有一個“?”符號表示，點擊后轉換到Dom對象視圖 




FireQuery - 用于jQuery開發的Firebug擴展 



可以看到存儲在元素上的臨時數據 



轉換到HTML視圖，我們又看到臨時數據附著在元素標簽之后 



FireQuery - 用于jQuery開發的Firebug擴展 

主要功能如下：
 本文由用戶 openkk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！