Browser devtools：如何确定元素的事件上下文

Question

我正在确定React Documentation页面的搜索功能如何工作：https://reactjs.org/。

我知道他们使用DocSearch，但我想知道幕后发生的事情。

目前，我试图知道在搜索栏中输入任何内容时会发生什么。这是我在Chrome开发工具中获得的：

火焰图：

源窗口（查看调用堆栈）

使用火焰图和调用堆栈显示事件期间调用了哪些函数，以及触发了什么事件（在此示例中，Event:keypress-> Event:textinput-> Event:input->function call）

问题是，我怎么知道使用devtools在DOM的哪个元素中触发了事件？通过查看源代码，我知道它是#algolia-doc-search触发的input事件，但我想知道一种更方便的跟踪DOM事件的方法。

谢谢！

以防万一，Firefox Dev Edition也无济于事。

Answer 1

Chrome和Firefox DevTools都提供了一种简单的方法来停止DOM事件上的脚本执行。他们称此功能为“事件监听器断点”。

在Firefox DevTools中，功能为located in the Debugger panel：

一旦检查了要监听的事件，触发它们将停止脚本执行，并直接跳到事件发生的行。他们还在右侧面板上提示发生了什么事件。

在看起来像这样的Chrome中：

在Firefox中非常相似：

要获取触发事件的元素，请检查Scope面板。在这里，您可以看到当前执行上下文中所有可用的变量。其中的this范围是指目标元素。另外，您可以展开事件变量（在示例中为e）并搜索target属性。

这是在Chrome中的外观：

同样，在Firefox中非常相似：

提示：将元素悬停在页面上将其突出显示。您还可以在Elements / Inspector面板中选择它，方法是右键单击该元素，然后选择Reveal in Elements面板（Chrome）或单击它旁边的目标图标（Firefox）。