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

Question

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

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

我什么都不知道,但当我点击链接时,会显示一个警告("栏").所以我知道在某个地方,一些代码被绑定到#foo.

如何找到将警报("栏")绑定到click事件的代码？我正在寻找Chrome的解决方案.

Ps.:这个例子是虚构的,所以我不是在寻找像这样的解决方案:"使用XXXXXX并在整个项目中搜索"alert(\"bar \")".我想要一个真正的调试/跟踪解决方案.

Answer 1

使用Chrome 15.0.865.0 dev."元素"面板上有"事件监听器"部分:

以及"脚本"面板上的"事件监听器断点".使用鼠标 - >单击断点然后"进入下一个函数调用",同时密切关注调用堆栈以查看用户区函数处理事件的内容.理想情况下,你会用unminified一个替代的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. 在新的" jQuery Audit "选项卡上,展开Events属性
3. 选择您需要的活动
4. 从处理程序属性中,右键单击函数并选择" 显示函数定义 "
5. 您现在将看到事件绑定代码
6. 单击" 漂亮打印 "按钮可获得更易读的代码视图

Answer 4

对于版本Chrome版本71.0.3578.98(最新的2019年):

1. 选择要检查的元素

2. 选择"事件侦听器"选项卡

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

Answer 5

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

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

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

• 右键单击页面上的任意位置(在chrome中)
• 点击'检查元素'
• 单击"脚本"选项卡
• 右上方的搜索栏

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

例如:搜索#foo会带你去

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

Answer 6

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

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

例如：（在铬控制台类型）

getEventListeners($0)

而$0是 DOM 中的选定元素。

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

Answer 7

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/