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

考虑一个元素

，它在jQuery函数中被

$（'hitme'）引用。单击（）

，或者可能是

$（文档）。在（'click'，'hitme'）

。如何在Javascript源代码中找到这些函数，而不是对字符串

hitme

进行grepping？考虑到GRIP是不可行的，因为字符串可能有任意大量的引用，并且可能有非常多的导入JavaScript文件。

---

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

< P> Chrome或Chrome可以帮助你。右键单击要浏览的元素，选择“检查元素”，查看以“计算样式”、“样式”开头的右侧面板。。。在它的底部，你可以找到“事件监听器”一节，它为你提供了关于监听哪些事件以及在代码中附加了哪些事件的信息。

Chrome或Chrome可以帮助你做到这一点。右键单击要浏览的元素，选择“检查元素”，查看以“计算样式”、“样式”开头的右侧面板。。。在它的底部，您可以找到“事件侦听器”一节，它为您提供了有关侦听哪些事件以及事件在代码中的附加位置的信息。

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

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

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

---

我推荐VisualEventBookmarklet。下面是来自该网站的无耻复制粘贴：

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

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

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

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

var old=$.fn.on；
$.fn.on=function（）{console.log（'called on'）；调试器；old.apply（this，arguments）；}

现在，对.on（）的每个调用都应该（同步）通过您并在“debugger；”处暂停声明

暂停后，在“调用堆栈”下查找并找到要查找的函数（例如，调用.on（）的函数）。您还可以向上面的重写函数添加一些条件，以确保不是每个对.on（）的调用都会暂停

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

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

var old=$.fn.on；
$.fn.on=function（）{console.log（'called on'）；调试器；old.apply（this，arguments）；}

现在，对.on（）的每个调用都应该（同步）通过您并在“debugger；”处暂停声明

暂停后，在“调用堆栈”下查找并找到要查找的函数（例如，调用.on（）的函数）。您还可以向上面的重写函数添加一些条件，以确保不是每个对.on（）的调用都会暂停

---

这里有一个解决方案，它捕获事件被触发（调度）的时刻，而不是添加侦听器的时刻（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对其进行调试也很有用。使用Chrome，您应该能够右键单击函数以“显示函数定义”。
以下是一个解决方案，它捕获事件被触发（调度）的时刻，而不是添加侦听器的时刻（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对其进行调试也很有用。使用Chrome，您应该能够右键单击函数以“显示函数定义”。
这是一个不错的书签，但它只显示jQuery库的哪些行绑定到元素。如果它显示使用jQuery的代码，那么它将是一个杀手级的应用程序。这是一个不错的书签，但它只显示jQuery库的哪些行绑定到元素。如果它能显示使用jQuery的代码，那么它将是一个杀手级应用。谢谢。我注意到它只提到，例如，Jquery可能正在侦听“click”事件。我怎么知道使用Jquery监听元素的代码在哪里？谢谢。我注意到它只提到，例如，Jquery可能正在侦听“click”事件。我怎么知道使用Jquery监听元素的代码在哪里？