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