2012-06-22 30 views
6

我們有一個非常JS密集的Web應用程序,主要基於jQuery的live綁定(事實上,自從jQuery v1.7之前我們就已經完成了這個)。Chrome中的jQuery事件調試

Chrome內置的開發工具是偉大的,但有一個問題是一直存在的,我總能找到幾乎不可能與他們進行調試:有時候我live處理程序不會因調用先前的處理程序停止事件冒泡

有沒有什麼辦法可以告訴Chrome(或確實是Firebug或其他擴展或書籤(最好是免費的!))在jQuery庫的代碼之外的下一個事件處理程序中斷。通過這種方式,我可以簡單地點擊按鈕,看看哪些事件是否正在觸發,逐步瀏覽並查看我何時意外停止傳播?

如果不是,有沒有一個很好的理由爲什麼不呢?這可以做到嗎?

回答

3

在Chrome DevTools您可以通過事件類型設置斷點:

https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints#listeners

不能排除jQuery的事件雖然。

BTW你應該使用delegate,而不是活的()

+0

我試過這個,我很掙扎。這隻會進入jQuery庫的代碼。我似乎無法找到調用(或應用)您提供的事件函數的jQuery庫的一部分。 我不認爲改變爲'委託'有什麼好處,因爲它們都需要位於DOM樹的頂部(可能很少有)。這兩個函數現在都被棄用了。當我們有時間時,我們將轉向['on'](http://api.jquery.com/on/) – Connell

+0

委託已被棄用,它已被替換爲「on」 –

+0

由於此線程已寫入DevTools團隊還介紹了黑箱腳本的功能,這對於這樣的事情確實有幫助。請參閱https://developer.chrome.com/devtools/docs/blackboxing – Thomas

7

您可能會發現這個有用:http://www.sprymedia.co.uk/article/Visual+Event+2

稱爲視覺事件的Javascript書籤其視覺顯示,有要事訂閱的朋友頁面上的元素,這些事件是什麼以及事件在觸發時運行的功能...

事實證明,W3C推薦的DOM接口沒有提供標準方法來找出事件監聽器是什麼e附加到特定的節點....因此,我們不得不查看各個Javascript庫,這些庫通常保留附加事件的緩存(以便稍後可以刪除它們並執行其他有用的抽象)。