如何在Chrome DevTools中查看元素触发的事件？

Question

我在一个页面上使用了一个可定制的表单元素，该元素来自于一个库。由于我正在尝试找到要使用的事件处理程序，因此我想查看与之交互时触发的JavaScript事件。

我如何使用Chrome Web开发者工具实现这一点？

- John Hoffman

---

这个书签工具可能会有帮助：http://www.sprymedia.co.uk/article/Visual+Event+2 - scytale

这里的答案很有价值，但上面的书签脚本 ^ 才是真正解决我的问题的东西。http://www.sprymedia.co.uk/article/Visual+Event+2 - Jazzy

Answer 1

您可以使用monitorEvents函数。

只需检查您的元素（在可见元素上单击鼠标右键→选择检查或转到Chrome开发者工具中的元素选项卡并选择想要的元素），然后转到控制台选项卡并输入：

monitorEvents($0)

当您将鼠标移动到此元素上方、聚焦或点击它时，触发的事件名称将与其数据一起显示。

要停止获取此数据，只需将以下内容写入控制台：

unmonitorEvents($0)

$0 是由 Chrome 开发者工具选择的最后一个 DOM 元素。您可以将任何其他 DOM 对象传递到该位置（例如 getElementById 或 querySelector 的结果）。

您还可以将事件“类型”指定为第二个参数，以将监视的事件缩小到一些预定义的集合。例如:

monitorEvents(document.body, 'mouse')

截至2023-01-30，可用类型列表如下：

• 鼠标
  "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
• 键盘
  "keydown", "keyup", "keypress", "textInput"
• 触摸
  "touchstart", "touchmove", "touchend", "touchcancel"
• 控件
  "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

引自这里。

我制作了一个小 gif，演示了该功能的使用：

- Mariusz Pawelski

---

同意。这是监控和追踪“特定”元素事件的事实标准方式。 - dmackerman

你使用了哪个工具制作 GIF？ - GorvGoyl

偶尔你会遇到一些诀窍，让你感觉好像升了一个级别。这就是其中之一。 - A Fader Darkly

从这里怎么继续？我已经找到了点击事件，这正是我感兴趣的事件。但是当我点击该元素时，该元素会执行哪些代码？我应该搜索 MouseEvent 的哪个属性来查找？请给出指导。 - Utku

但是要找到处理程序，例如点击处理程序。 - Sheikh Abdul Wahid

Answer 2

• 按下 F12 打开开发者工具
• 点击“Sources”选项卡
• 在右侧滚动到“Event Listener Breakpoints”，并展开树形结构
• 单击要监听的事件
• 与目标元素交互，如果它们触发了，您将在调试器中得到一个断点

类似地，您可以右键单击目标元素 -> 选择“检查元素” 在开发框架的右侧向下滚动，在底部是“事件监听器”。展开树形结构以查看哪些事件附加到该元素。不确定是否适用于通过冒泡处理的事件（我猜可能不适用）

- Matt

---

如果你的目标是鼠标事件，那么这个解决方案会有问题，因为断点会中断流程。 - WendyG

如果所有事件都指向我不关心的被压缩的 jQuery，那么我如何找到使用该 jQuery 的函数？ - Muhammad Umer

它可以显示我创建的自定义事件吗？当我读到它改变了人们的生活时，这是我首先想到的事情。我有什么遗漏吗？ - Tebe

你可以将jQuery设置为黑盒子，这样Chrome浏览器就会跳过它，直接访问你的源代码。https://developer.chrome.com/devtools/docs/blackboxing - Matt Zeunert

我已经检查了事件监听器的框架监听器，但仍然没有看到Backbone的事件监听器。有什么想法吗？ - akantoword

Answer 3

Visual Event是一个很好的小书签工具，可以用来查看元素的事件处理程序。在线演示可以在这里查看。

- tifkin

Answer 4

对于jQuery（至少版本1.11.2），以下步骤适用于我的情况。

1. 右键单击元素并打开“Chrome开发者工具”
2. 在“控制台”中输入$._data(($0), 'events');
3. 展开附加对象并双击handler:值。
4. 这将显示所附加函数的源代码，使用“搜索”选项卡搜索其中的部分。

现在是时候停止重新发明轮子并开始使用vanilla JS事件了... :)

- Daniel Sokolowski

---

2021年尝试后，当我尝试这个语法时，在控制台输出中只得到了“undefined”。有什么想法吗？仍然找不到如何查看哪些自定义的jQuery事件附加到特定元素的方法 :( - Kevin Dark

Answer 5

这不能显示自定义事件，如如果它是一个jQuery插件，则您的脚本可能会创建这些事件。例如：

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Chrome开发者工具中Scripts下的Event面板不会显示"Something:custom-event-one"

- airtonix

---

那么，如何找到那些事件呢？ - Calydon

在苏联Chrome中，这些事件会找到你。 - Eric Burel

@Calydon 如果你看一下我发布的代码块，你会发现这种用jquery触发的事件只有在你自己的代码中跟踪它们时才能在控制台中找到。我忘记了这些是jquery中的CustomEvents还是一些特殊的内部-jquery-only实现。我认为DevTools永远不会给我们一个合适的UI来查看已注册的CustomEvents或已注册的jquery事件。 - airtonix

Answer 6

要在Chrome浏览器中列出窗口对象上的所有事件处理程序，您可以键入window.getEventListeners(window)或针对特定元素window.getEventListeners(document.body)

- Kiritushka