浏览器开发工具：如何找出元素的事件上下文
Browser devtools: How to figure out the element's event context
我正在弄清楚 React 文档页面的搜索功能是如何工作的：https://reactjs.org/ .
我知道他们使用 DocSearch 但我想知道幕后发生了什么。
目前我想知道当我在搜索栏中输入任何内容时会发生什么。这是我在 Chrome 开发工具中得到的：
火焰图：
来源window（查看调用堆栈）
使用火焰图和调用堆栈显示事件期间调用了哪些函数，以及触发了哪些事件（在此示例中，Event:keypress -> Event:textinput -> Event:input -> function call)
问题是，我如何知道 DOM 的哪个元素使用 devtools 触发了事件？我通过查看源代码知道它是 #algolia-doc-search 触发的 input 事件，但我想知道一种更方便的方法来跟踪 DOM 事件。
谢谢！
以防万一，Firefox 开发版也无济于事。
Chrome 和 Firefox DevTools 都提供了一种简单的方法来停止在 DOM 事件上执行脚本。他们称此功能为 "Event Listener Breakpoints".
在 Chrome DevTools 这个 can be found in the Sources panel:
Firefox DevTools 中的功能是 located in the Debugger panel:
一旦你检查了你想要监听的事件，触发它们将停止脚本执行并直接跳转到事件发生的行。他们还在右侧面板中提示发生了什么事件。
在 Chrome 中看起来像这样：
在 Firefox 中非常相似：
要获取触发事件的元素，请检查 Scope 面板。在那里您可以看到当前执行上下文中可用的所有变量。那里的 this 范围指的是目标元素。或者，您可以展开事件变量（在示例中为 e）并搜索 target 属性。
这是 Chrome 中的样子：
同样，在 Firefox 中非常相似：
专业提示：悬停元素会在页面中突出显示它。您还可以在 Elements/Inspector 面板中 select 通过右键单击元素并 selecting 在元素面板中显示 (Chrome) 或单击它旁边的目标图标 (Firefox)。
我正在弄清楚 React 文档页面的搜索功能是如何工作的：https://reactjs.org/ .
我知道他们使用 DocSearch 但我想知道幕后发生了什么。
目前我想知道当我在搜索栏中输入任何内容时会发生什么。这是我在 Chrome 开发工具中得到的：
火焰图：
来源window（查看调用堆栈）
使用火焰图和调用堆栈显示事件期间调用了哪些函数，以及触发了哪些事件（在此示例中，Event:keypress -> Event:textinput -> Event:input -> function call)
问题是，我如何知道 DOM 的哪个元素使用 devtools 触发了事件？我通过查看源代码知道它是 #algolia-doc-search 触发的 input 事件，但我想知道一种更方便的方法来跟踪 DOM 事件。
谢谢！
以防万一，Firefox 开发版也无济于事。
Chrome 和 Firefox DevTools 都提供了一种简单的方法来停止在 DOM 事件上执行脚本。他们称此功能为 "Event Listener Breakpoints".
在 Chrome DevTools 这个 can be found in the Sources panel:
Firefox DevTools 中的功能是 located in the Debugger panel:
一旦你检查了你想要监听的事件，触发它们将停止脚本执行并直接跳转到事件发生的行。他们还在右侧面板中提示发生了什么事件。
在 Chrome 中看起来像这样：
在 Firefox 中非常相似：
要获取触发事件的元素，请检查 Scope 面板。在那里您可以看到当前执行上下文中可用的所有变量。那里的 this 范围指的是目标元素。或者，您可以展开事件变量（在示例中为 e）并搜索 target 属性。
这是 Chrome 中的样子：
同样，在 Firefox 中非常相似：
专业提示：悬停元素会在页面中突出显示它。您还可以在 Elements/Inspector 面板中 select 通过右键单击元素并 selecting 在元素面板中显示 (Chrome) 或单击它旁边的目标图标 (Firefox)。