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

Question

考虑一个元素 <img id='hitMe' />在 jQuery 函数中引用 $('#hitme').click()或者可能 $(document).on('click', '#hitme') .我如何在 Javascript 源代码中找到这些函数，而不是搜索字符串 hitme ？考虑到 grepping 是不可行的，因为字符串可能有任意大量的引用，并且可能有大量导入的 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，您应该能够右键单击函数以“显示函数定义”。