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

Question

考虑一个元素

<img id='hitMe' />

，它在 jQuery 函数中用

$('#hitme').click()

或可能用

$(document).on('click', '#hitme')

引用。除了 grep 字符串

hitme

之外，如何在 Javascript 源代码中找到这些函数？考虑到 grep 是不可行的，因为字符串可能有任意大量的引用，并且可能有大量导入的 Javascript 文件。

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

Answer 1

这里有一个解决方案，可以捕获事件被触发（分派）的时刻，而不是添加侦听器（打开/单击）的时刻。

可以通过覆盖

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);

在本例中，我选择将函数的内容打印到控制台，但像 Omri Sivan 建议的那样使用

debugger;

进行调试也很有用。使用 Chrome，您应该能够右键单击该函数以“显示函数定义”。

Answer 2

Chrome 或 Chromium 可以帮助您。右键单击要探索的元素，选择“检查元素”，查看以“计算样式”、“样式”开头的右侧面板...在其底部，您将找到该部分“事件侦听器”，它为您提供有关侦听哪些事件以及将其附加到代码中的位置的信息。

Answer 3

我推荐视觉事件书签。以下是来自该网站的无耻复制粘贴：

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

在基于 chromium 的浏览器中存在此功能：monitorEvents