之前也不知道看了哪篇文章的介紹,在火狐上裝了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對於前端開發和測試來說絕對是一大助手,更多的好處還是在實際中可以體會出來。
