使用Chrome,如何查找绑定到元素的事件


148

假设我的页面上有一个链接:

<a href="#" id="foo">Click Here</a>

我什么都不知道,但是当我单击链接时,alert("bar")会显示一个。所以我知道某个地方已经绑定了一些代码#foo

如何找到alert("bar")将click事件绑定到的代码?我正在寻找Chrome的解决方案。

附注:这个例子是虚构的,所以我没有在寻找类似的解决方案:“使用XXXXXX并在整个项目中搜索“ alert(\“ bar \”)”。我想要一个真正的调试/跟踪解决方案。

Answers:


139

使用Chrome 15.0.865.0开发版。在“元素”面板上有一个“事件侦听器”部分:

在此处输入图片说明

在“脚本”面板上还有一个“事件侦听器断点”。使用鼠标->单击断点,然后“进入下一个函数调用”,同时密切注意调用堆栈,以查看哪个userland函数处理该事件。理想情况下,你会用unminified一个替代的jQuery的精缩版,这样你就不必一步所有的时间和使用步过在可能的情况。

在此处输入图片说明


10
越来越近了,但是其中的大多数结果都指向...的第16行... jquery.min.js :(((我知道为什么,不需要解释,但是我们如何找到谁调用了bind()方法jQuery吗?
FMaz008 2011年

这些工具也可以在Chrome 12.0.742.100中使用。:) 谢谢 !
FMaz008 2011年

13
@蓬松:你不必。{ }查看js时,只需点按左下角的符号即可。魔法。
汉尼斯·施耐德

逐步完成jQuery的复杂事件调度代码是一件大事。下面的jQuery Audit答案(stackoverflow.com/a/30487583/24267)更好。
mhenry1384

3
要将jquery从调用堆栈中排除,请将脚本黑盒化:developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan或mods,是否可以参考黑匣子来更新答案-似乎是一个常见问题与这个答案有关。
克里斯·海因斯

47

您还可以使用Chrome的检查器以另一种方式查找附加事件,如下所示:

  1. 右键单击要检查的元素,或在“元素”窗格中找到它。
  2. 然后在“事件监听器”选项卡/窗格中,展开事件(例如,“单击”)
  3. 展开各个子节点以找到所需的子节点,然后查找“ handler”子节点的位置。
  4. 右键单击“功能”一词,然后单击“显示功能定义”

它将带您到定义处理程序的位置,如下图所示,并由Paul Irish在此处进行解释:https : //groups.google.com/forum/#!topic/google- chrome-developer-tools/ NTcIS15uigA

“显示功能定义”


两岁了,仍然是这个问题的最佳答案。
Stuart

16

安装后,请尝试使用jQuery Audit扩展程序(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg):

  1. 检查元素
  2. 在新的“ jQuery Audit ”选项卡上,展开“事件”属性
  3. 选择您需要的活动
  4. 在处理程序属性中,右键单击功能,然后选择“ 显示功能定义
  5. 您现在将看到事件绑定代码
  6. 单击“ Pretty print ”按钮以更清晰地查看代码

1
这是一个很好的扩展,可以节省通过JavaScript进行筛选的时间。
尼尔·梦露

我经常发现“事件监听器”列出了“没有事件监听器”,并且选择“事件监听器断点”>“鼠标”>“单击”不会创建断点。这个插件很好用。
StuartN

@Javier>这是一个很好的回应。它适用于javascript(非jQuery)mecanisme吗?
Mahefa

11

(截止到2020年)对于Chrome版本83.0.4103.61

Chrome开发者工具-事件监听器

  1. 选择要检查的元素

  2. 选择“事件侦听器”选项卡

  3. 确保检查Framework侦听器以显示真实的javascript文件而不是jquery函数。


6

编辑:代替我自己的答案,这是一个非常好的:如何使用Firebug(或类似工具)调试JavaScript / jQuery事件绑定

Google Chromes开发人员工具的脚本部分内置了搜索功能

如果您不熟悉此工具:(以防万一)

  • 右键单击页面上的任意位置(Chrome浏览器)
  • 点击“检查元素”
  • 点击“脚本”标签
  • 右上方的搜索栏

快速搜索#ID应该最终将您带到绑定功能。

例如:搜寻#foo会带您前往

$('#foo').click(function(){ alert('bar'); })

在此处输入图片说明


4
好的开始,但是如果我有1500个对#foo的引用,其中大多数没有绑定任何内容,或者在我在当前情况下未触发的外部脚本中有多个#foo ID的情况下该怎么办?
FMaz008 2011年

好问题。以我的经验,这通常是人工调试过程开始的地方:)
Michael Jasper

1
呵呵,您是对的,但我的问题还是关于我作为人必须做什么:p
FMaz008 2011年


4

findEventHandlers是一个jquery插件,原始代码在这里:https ://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

脚步

  1. 将原始代码直接粘贴到chrome的控制台中(注意:必须已加载jquery)

  2. 使用以下函数调用: findEventHandlers(eventType, selector);
    查找对应的选择器,指定元素的eventType处理程序。

范例

findEventHandlers("click", "#clickThis");

然后,如果有的话,可用的事件处理程序将显示以下消息,您需要展开以找到该处理程序,右键单击该函数并选择 show function definition

参见:https : //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/


3

对于Chrome版本52.0.2743.116:

  1. 在Chrome的开发人员工具中,点击Ctrl+ Shift+调出“搜索”面板F

  2. 输入您要查找的元素的名称。

绑定元素的结果应显示在面板中,并说明其所在的文件。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.