4

在每隔一段時間我就會有巨大的jQuery的事件處理程序,如: -有沒有辦法知道某個事件正在調用哪個函數?

$(document).on("click",".some-class", function(){ 
    //perform some action 
}); 
附加到我的網頁上的元素

。如果在我的頁面上有很少的事件處理程序,但是在一個巨大的應用程序中調試這些事件處理程序可能是一個真正的痛苦,那麼這不成問題。在某些事件中,我不知道有時會調用哪個回調函數。

所以,我的問題是,是否有任何選項或技巧的開發工具知道哪些函數被調用?

它不一定是開發工具。它可以是JavaScript或jquery技巧。

此外,我意識到我可以在我的回調函數中執行console.log,debugger;甚至將console.trace(),但我想知道是否有更清晰和更智能的東西。

+0

推薦推薦此商品! http://stackoverflow.com/questions/21181340/how-to-know-which-file-or-script-is-running-current-element –

+0

這是有點幫助,但沒有精確定位線上有多個事件時同一班。 – shriek

+0

可能重複的[如何找到jQuery事件的原始(匿名函數)源?](http://stackoverflow.com/questions/12965998/how-to-find-the-original-anonymous-function-source-of -jquery-events) – NoBugs

回答

1

因此,我找到了一種方法來獲得開發工具來做到這一點,而不使用任何一種console.log(s)。

這是你做了什麼(我會說話了Chrome瀏覽器開發工具但Firefox應該是太相似了)

  • 開放開發工具,去Source Panel
  • 在您的右側應該有Event Listener Breakpoints,繼續並單擊鼠標 - >單擊以在點擊事件上啓用任何斷點。 (您可以選擇這個您自己的事件。我做的單擊事件在這種情況下)

  • 如果你的腳本是minifiedbundled然後就跳過這個過程。繼續並點擊您想要查找功能的元素。它應該觸發breakpoint,你會採取多數民衆贊成啓用單擊事件腳本(通常jQuery的在我的情況,你可能要做幾個步驟的在去jQuery文件)

  • 這有可能是你的jQuery將是minified,但沒關係,Chrome Dev Tools (位於source panel左下方的微小{}按鈕上有prettifier

  • 現在按Ctrl+Shift+O(此搜索上開發工具的功能名稱)和類型dispatch(對我來說這是所有觸發我們的自定義功能似乎發生。

  • 現在創建一個breakpoint在while循環e.currentTarget右後(可能在不同版本的jQuery的不同),然後按播放/恢復breakpoint(斷點現在應該跳到這個線)

  • 現在很少有Step Ins(可能更多)它會帶你到調用這個事件的函數。

這不是一個完美的解決方案,但它擊敗了你的項目中的所有文件搜索。

如果有人有更好的解決方案,那麼我會將答案改爲最簡單的答案。

+0

Omg。我找到了最終的解決方案。 http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object – shriek

2

您可以使用Chrome開發工具Javascript CPU profiler

它會告訴你哪些函數被調用,以及通過哪些其他函數。

雖然我懷疑你會發現console.log更容易。

+0

CPU Profiler是我沒有想過的。如果真的有幫助,它會很有趣。 – shriek

+1

Firefox有一個很好的內置分析器,它甚至會顯示一張圖表來縮小在什麼時間進行許多操作的範圍。 – NoBugs

2

在這裏很多時候,我推薦console.log()在每個函數的開始。然後看看在控制檯上創建的跟蹤。對於挑選多次無謂地發射的事件非常有用。

// Your function 
function doSomething(event) { 
console.log("doSomething(event)", event.currentTarget); 
// code for doSomething 
} 

$('#mybutton').click(doSomething); 
+2

只是希望有更清潔的方式來做到這一點,而不是隨處都有日誌填充代碼。 :/ – shriek

+0

Yep同意了。它是一個無賴,你可以完成其中的一個:a)在你的prod環境中運行'window.console = {log:function(){}};'語句去除日誌,b)用一個包裝器創建一個調試器類圍繞'console.log'並調用它,或者c)使用釋放時間最小化器,它會自動將所有調用去除到'console.log'中([請參閱此鏈接](http://stackoverflow.com/questions/20092466/)可以-醜化-JS-除去最控制檯登錄報表))。 –

相關問題