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

Question

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

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

我什么都不知道，但是当我点击链接时，会显示一个警告（“栏”）。 所以我知道在某个地方，一些代码被绑定到#foo。

如何找到将警报（“bar”）绑定到click事件的代码？ 我正在寻找Chrome的解决方案。

Ps。：这个例子是虚构的，所以我不是在寻找像这样的解决方案：“使用XXXXXX并在整个项目中搜索”alert（\“bar \”）“。我想要一个真正的调试/跟踪解决方案。

Answer 1

使用 Chrome 15.0.865.0 dev 。 “元素”面板上有一个“事件监听器”部分：

“脚本”面板上的“事件监听器断点”。使用鼠标 - ＆gt;单击断点然后“进入下一个函数调用”，同时密切关注调用堆栈以查看userland函数处理事件。理想情况下，您可以使用未经编译的jQuery替换缩小版本的jQuery，这样您就不必一直单步执行，并在可能的情况下使用跳过。

Answer 2

您还可以使用Chrome的检查程序以其他方式查找附加事件，如下所示：

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

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

Answer 3

在安装后按照以下步骤尝试jQuery Audit扩展（https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg）：

1. 检查元素
2. 关于新的＆＃39; jQuery Audit ＆＃39;选项卡展开“事件”属性
3. 选择您需要的活动
4. 在处理程序属性中，右键单击功能并选择＆＃39; 显示功能定义＆＃39;
5. 您现在将看到事件绑定代码
6. 点击＆＃39; 漂亮的打印＆＃39;用于更易读的代码视图的按钮

Answer 4

对于版本 Chrome版本71.0.3578.98 （最新截至2019年）：

1. 选择要检查的元素

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

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

Answer 5

编辑 ：代替我自己的答案，这个非常优秀：How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

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

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

• 右键单击页面上的任意位置（以chrome显示）
• 点击'Inspect Element'
• 点击“脚本”标签
• 右上角的搜索栏

快速搜索#ID最终会带您进入绑定功能。

例如：搜索#foo会将您带到

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

Answer 6

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/

Answer 7

2018年更新-可能对未来的读者有所帮助：

我不确定这是最初在Chrome中引入的。但是现在可以在Chrome中完成此操作的另一种（简便）方法是通过控制台命令。

例如（在Chrome控制台类型中为 ）

getEventListeners($0)

$ 0 是DOM中的选定元素。

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

Answer 8

对于Chrome版本52.0.2743.116：

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

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

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