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

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

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

我什么都不知道，但是当我点击链接时，会显示一个 alert("bar")。 所以我知道在某个地方，某些代码被绑定到 #foo。

如何找到将 alert("bar")绑定到单击事件的代码？ 我正在寻找一个解决方案与铬。

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

118799 次浏览
小开

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

GoogleChromes 开发工具在脚本部分内置了一个搜索功能

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

  • 右键单击页面上的任何地方(铬)
  • 单击“检查元素”
  • 单击“脚本”选项卡
  • 搜索栏在右上角

对 # ID 进行快速搜索最终会带您到绑定函数。

例句: 搜索 #foo会带你到

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

enter image description here

小开
最佳答案

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

enter image description here

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

enter image description here

小开

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

  1. 右键单击要检查的元素，或者在“元素”面板中找到它。
  2. 然后在“ Event Listener”选项卡/窗格中，展开事件(例如“ click”)
  3. 展开各个子节点以找到所需的子节点，然后查找“处理程序”子节点所在的位置。
  4. 右键单击“函数”，然后单击“显示函数定义”

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

'Show Function definition'

小开

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

  1. 检查元素
  2. 在新的“ JQuery 审计”选项卡上展开 Events 属性
  3. 为您需要的事件选择
  4. 从处理程序属性中，右键单击函数并选择‘ 显示函数定义’
  5. 现在您将看到 Event 绑定代码
  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/

小开

Chrome 版本52.0.2743.116:

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

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

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

小开

(截至2022年最新版本) Chrome 版本99 :

Chrome Developer Tools - Event Listener

  1. 选择要检查的元素

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

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

小开

2018年最新消息-可能对未来的读者有帮助:

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

例如: (铬合金控制台类型)

getEventListeners($0)

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

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

enter image description here


提交答案