Browser devtools: How to figure out the element's event context

Question

I'm figuring out how React Documentation page's search feature works: https://reactjs.org/ .

I know they use DocSearch but I would like to know what happens behind the scene.

Currently I'm trying to know what happens when I type anything in the search bar. Here is what I got in the Chrome dev tools:

Flame graph:

Source window (to see the Call Stack)

Using the Flame Graph and the Call Stack show what functions are called during the event, as well as what event are being triggered (in this example, Event:keypress -> Event:textinput -> Event:input -> function call)

The problem is, how do I know in which element of DOM triggered the event using devtools? I know it was #algolia-doc-search triggered input event by looking at the source code, but I would like to know a more convenient way to track DOM events.

Thanks!

Just in case, Firefox Dev Edition doesn't help much neither.

Answer 1

Both the Chrome and Firefox DevTools provide an easy way to stop the script execution on DOM events. They call this feature "Event Listener Breakpoints".

In the Chrome DevTools this can be found in the Sources panel:

In the Firefox DevTools the feature is located in the Debugger panel:

Once you have check the events you want to listen for, triggering them will halt the script execution and jump directly to the line where the event occurred. They also provide a hint at their right side panels what event occurred.

In Chrome that looks like this:

In Firefox it's very similar:

To get the element that triggered the event, check the Scope panel. In there you see all variables available in the current execution context. The this scope in there refers to the target element. Alternatively, you can expand the event variable (in the example that's e) and search for the target attribute.

Here's how it looks like in Chrome:

And again, in Firefox very similar:

Pro tip: Hovering the element will highlight it in the page. And you can also select it in the Elements/Inspector panel by right-clicking the element and selecting Reveal in Elements panel (Chrome) or clicking the target icon next to it (Firefox).