调试Javascript运行的元素点击

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

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

来源

2013-02-05 dotancohen

下面是在捕获该事件触发（派遣），而不是在监听被添加（上/点击）化时点的解决方案。

可以通过覆盖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，您应该可以右键单击该功能以“显示功能定义”。

来源

2014-05-08 08:39:02 ipodppod

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

来源

2013-02-05 10:21:21 tyrondis

谢谢。我注意到它只提到了，例如，Jquery可能正在侦听'click'事件。我怎么知道在哪里存在使用Jquery来监听元素的代码？ – dotancohen

此链接提供了关于dom元素上的事件处理程序的很好的信息。

Accessing functions bound to event handlers with jQuery

来源

2013-02-05 10:29:52 Vijey

谢谢你，我会阅读一些链接的主题。 – dotancohen

我建议视觉事件书签。接下来的是来自网站的无耻复制粘贴：

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

哪些元素已经连接到他们的活动
类型连接到一个元素
将与事件上运行的代码触发的事件
源文件和对于被定义附加的功能，其中的行号（WebKit浏览器和Opera只）

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

来源

2013-02-05 10:35:54 Martin

我会试试这个书签，谢谢！ – dotancohen

这是一个不错的书签，但它只显示jQuery库的哪些行绑定到元素。如果它会显示使用jQuery的代码，那么它将是一个杀手级应用程序。 – dotancohen

试试下面的（我使用Chrome/Chrome开发工具）：

覆盖jQuery的上/单击具有类似功能：

var old = $.fn.on; $.fn.on = function() { console.log('called on'); debugger; old.apply(this, arguments);}
每次调用。对（）现在应该通过你（同步）并在'调试器'处暂停;'声明。
暂停后，查看“调用堆栈”并找到您正在查找的函数（例如，调用.on（）的函数）。您还可以在上面的覆盖功能中添加一些条件，以确保不会每次调用.on（）都会暂停。

Chrome Dev Tools - script paused

来源

2014-05-07 12:12:08

调试Javascript运行的元素点击

回答

相关问题