156

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

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

我不知道其他任何内容,但是当我单击链接时,alert("bar")会显示一个。所以我知道在某个地方,一些代码正在绑定到#foo.

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

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

4

8 回答 8

147

使用Chrome 15.0.865.0 开发。Elements 面板上有一个“Event Listeners”部分:

在此处输入图像描述

以及“脚本”面板上的“事件侦听器断点”。使用鼠标 -> 单击断点,然后“进入下一个函数调用”,同时密切关注调用堆栈以查看哪个用户空间函数处理事件。理想情况下,您应该将 jQuery 的缩小版本替换为未缩小的版本,这样您就不必一直介入并尽可能使用step over

在此处输入图像描述

于 2011-09-07T17:54:17.987 回答
49

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

  1. 右键单击要检查的元素,或在“元素”窗格中找到它。
  2. 然后在“事件侦听器”选项卡/窗格中,展开事件(例如“单击”)
  3. 展开各个子节点以找到您想要的那个,然后查找“处理程序”子节点所在的位置。
  4. 右键单击“函数”一词,然后单击“显示函数定义”

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

'显示函数定义'

于 2014-08-11T05:28:10.390 回答
17

尝试一下 jQuery Audit 扩展(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg),安装后按照以下步骤操作:

  1. 检查元素
  2. 在新的 ' jQuery Audit ' 选项卡上展开 Events 属性
  3. 选择您需要的活动
  4. 从处理程序属性中,右键单击函数并选择“显示函数定义
  5. 您现在将看到事件绑定代码
  6. 单击“漂亮的打印”按钮以获得更易读的代码视图
于 2015-05-27T16:00:07.743 回答
13

(截至 2020 年的最新版本)对于 Chrome 版本 83.0.4103.61 版本

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

  1. 选择要检查的元素

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

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

于 2017-11-17T07:34:17.027 回答
6

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

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

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

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

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

例如:搜索#foo会带你到

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

在此处输入图像描述

于 2011-09-07T17:51:40.573 回答
6

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

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

例如:(chrome 控制台类型中

getEventListeners($0)

$0是 DOM 中的选定元素。

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

在此处输入图像描述

于 2018-08-17T14:45:38.403 回答
5

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/

于 2015-07-11T06:10:08.093 回答
3

对于 Chrome 版本 52.0.2743.116:

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

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

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

于 2016-08-25T17:31:16.733 回答