如何找到jQuery事件的原始（匿名函數）源？

Question

大多數jQuery代碼使用匿名函數，例如：

jQuery('someelements').someEvent(function() {
    // code here
});

這很好用，但是在調試方面做得不好。 我試圖使用Firefox Firebug和Chrome的檢查器同時具有暫停javascript功能來查找一些匿名函數的來源，但是它調用的實際代碼在jQuery js文件中，並且單步執行該代碼永遠不會告訴哪一行，甚至什么.js文件添加了該事件。 如何查看動作的定義位置？

Answer 1

有一個Google Chrome / Firefox插件，可讓您查看jQuery或其他（特定）庫注冊的事件 ： Visual Event 。

類似的問題： Firefox擴展找出哪個Javascript事件綁定到受檢查的元素？

Answer 2

嘗試使用非縮小版本的jQuery並使用Firebug中的profile功能在代碼中發生事件時在jQuery源中找到要調用的確切行。

如果您打算查找某些jQuery選擇器的實現或函數的實現，請參考此功能驚人的資源，它確實做到了：
http://www.keyframesandcode.com/resources/javascript/deconstructed/jquery/

Answer 3

我不確定我是否完全了解上下文。 但是，如果您將函數作為值（例如，在某些對象屬性中）找到，則始終可以從Chrome DevTools的上下文菜單中導航至其源。

Answer 4

我發現有幫助的一件事是為事件處理程序命名，盡管該名稱未在其他任何地方被調用。 這樣，在分析工具中更容易識別它。

例如

jQuery('someelements').someEvent(function someEventHandler() {
    // code here
});

一旦事件處理程序都具有名稱，您就可以破解jquery dev版本以記錄事件和處理程序名稱。 我在ret = ... .apply()上方的事件分派方法中添加此ret = ... .apply()

var handler = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler );
console.log("FIRE EVENT ", event.type, "HANDLER: ", handler.name||'Anonymous Function'); 

Answer 5

jQuery('someelements').someEvent(function(e) {
    // code here
alert(e.target);
});