单击调试Javascript与元素一起运行的调试

Question

考虑一个元素<img id='hitMe' />，它在jQuery函数中引用$('#hitme').click()或$(document).on('click', '#hitme')。如何在Javascript源代码中找到这些函数，而不是为字符串hitme求值？考虑到grepping是不可行的，因为字符串可能具有任意大量的引用，并且可能存在大量导入的Javascript文件。

也许可能有办法让Firebug逐步进入页面加载后逐行运行的Javascript函数？考虑到我不知道在哪里设置断点，因为我不知道运行了哪个函数。

Answer 1

Chrome或Chromium可以帮助您。右键单击要探索的元素，选择“Inspect element”，查看右侧面板，以“Computed Style”，“Style”开头......在它的底部，您将找到该部分“事件监听器”，它为您提供有关所侦听事件以及附加代码的位置的信息。

Answer 2

此链接提供有关dom元素上事件处理程序的详细信息。

Accessing functions bound to event handlers with jQuery

Answer 3

我推荐Visual Event bookmarklet。接下来是来自网站的无耻复制粘贴：

Visual Event是一个开源的Javascript书签，它提供有关已附加到DOM元素的事件的调试信息。 视觉事件显示：

• 哪些元素附加了事件
• 附加到元素的事件类型
• 将触发将与该事件一起运行的代码
• 定义附加功能的源文件和行号（Webkit浏览器和仅限Opera）

http://www.sprymedia.co.uk/article/Visual+Event+2

Answer 4

尝试以下操作（我正在使用Chrome / Chrome开发工具）：

1. 用以下内容覆盖jQuery的on / click函数：

   var old = $.fn.on; $.fn.on = function() { console.log('called on'); debugger; old.apply(this, arguments);}

2. 对.on（）的每次调用现在应该通过你（同步）并暂停在'调试器';言。

3. 暂停后，查看“调用堆栈”并找到您要查找的函数（例如调用.on（）的函数）。您还可以在上面的覆盖函数中添加一些条件，以确保不会每次调用.on（）都会暂停。

Answer 5

这是一个解决方案，它捕获事件触发（调度）的时刻，而不是添加侦听器的时刻（on / click）。

可以通过覆盖jQuery.event.dispatch来完成。 例如：

(function($){
    var old = $.event.dispatch;
    $.event.dispatch = function(event){
        if(event.type=='click'){
            var handlers = ( $._data( this, "events" ) || {} )[ event.type ] || [];
            console.log('handlers', handlers[0]);
        }
        old.apply(this, arguments);
    };
})(jQuery);

在这个例子中，我选择将功能的内容打印到控制台，但是使用debugger;建议Omri Sivan进行调试也很有用。使用Chrome，您应该能够右键单击该功能以显示功能定义＆＃34;。