Event Listeners概述了具有event listener的每个元素，按类型着色（单击、悬停、滚动、触摸、键盘和表单），显示每个处理程序的来源，并在 DOM 更改时闪烁元素。
弄清楚为什么某些东西有反应（或没有反应）通常从页面无法回答的问题开始：这个元素上是否有点击处理程序？哪个元素实际上拥有悬停行为？什么是听滚动并使页面卡顿？如果您已经知道要选择哪个元素，浏览器DevTools可以一次列出一个元素的listeners。
该工具可以一次性回答整个页面的问题。每个具有listener元素都会获得其类型颜色的轮廓 - 单击、悬停、滚动、触摸和拖动、键盘或表单和焦点 - 悬停一个元素会显示确切的事件以及每个事件的来源：内联属性、on-property、React或Vue处理程序、jQuery或addEventListener。类别图块可打开和关闭每种类型，下面的列表会命名每个元素，因此只需单击一下即可滚动到它。
框架处理得当。React将其listeners附加到根并在内部调度事件，这将使整个应用程序看起来可点击；该工具将这些根注册放在一边，并在声明它们的元素上显示React处理程序。快速扫描无需重新加载，涵盖内联处理程序、React、Vue和jQuery。在打开工具之前使用普通addEventListener添加的Listeners只能从页面加载开始时看到，因此Reload & record会在录音打开时重新加载页面一次 - 然后该工具会自行重新打开，其中包含每个listener，window和document上的页面级侦听器也是如此。
第二个选项卡监视 DOM 本身。每个添加或删除的节点、属性更改和文本更改都会在页面上闪烁，计数器显示每秒的变化，并且列表对更改最多的元素以及所涉及的属性进行排名。当没有人接触页面时的稳定流通常意味着计时器、JavaScript 驱动的动画或框架重新渲染超过其应有的程度 - 正是这些东西耗尽电池并使页面卡顿。
带有点击、悬停、滚动、触摸、键盘和表单listeners元素以其自己的颜色勾勒出轮廓，并用图块来显示或隐藏每种类型。
内联属性、on-property、React和Vue处理程序、jQuery事件和addEventListener调用，在每个元素上进行标记。
React的根级listeners被保留，其处理程序显示在声明它们的元素上，而不是整个应用程序上。
Reload & record从页面加载开始捕获每个addEventListener调用，包括window和document listeners，仅针对该一次加载。
添加和删除的节点、属性更改和文本更改会在页面上闪烁，并带有每秒突变计数器。
变化最大的元素的排名列表以及所涉及的属性，直接指向失控的重新渲染。
一目了然地查看按钮是否实际上具有listener，或者处理程序是否位于包装元素上。
查找侦听滚动、滚轮或触摸移动的每个元素，包括window和document上的listeners。
检查哪些控件响应键盘事件，哪些控件仅响应鼠标。
当页面空闲时观察突变计数器；不断变化的元素指向计时器或框架做额外的工作。
将鼠标悬停在一个不熟悉的站点上，查看哪些部分是交互式的以及哪个框架将它们连接起来。
单击DevSuite Pro坞站中的Event Listeners图标。快速扫描会立即运行并概述它找到的每个元素。
将鼠标悬停在任何概述的元素上即可查看其事件及其来源。使用类别图块仅显示单击、悬停或滚动listeners。
按Reload & record可在记录打开的情况下重新加载页面一次。该工具自行重新打开，现在包含每个addEventListener调用。
单击列表中的一行可将页面滚动到该元素并使其闪烁。Copy report以文本形式为您提供完整列表。
打开DOM mutations卡并使用该页面。变化的元素闪烁，最繁忙的元素上升到列表的顶部。
