For example there is a button. It is wrapped by
It’s hard to debug.
Is it possible to “catch” this event? I.e. to know, what function is called after the click on the button? Button doesn’t have attribute
And if it’s not possible then is it possible to make trace? That is to look at all functions calls, which is called after which?
It would be better in visual way, though in textual is also good:)
Yeah – this sort of thing is not as simple as you would like.
Google Chrome, Edge and Opera have an Event Listeners panel. Right-click your button, then select Inspect Element. Make sure the correct element is selected, then check the Event Listeners panel on the right.
In Firefox this feature is implemented differently:
The inspector shows the word “event” next to elements in the HTML
Pane, that have event listeners bound to them. Click the icon, then
you’ll see a popup listing all the event listeners bound to this
You can also use the
Besides the accepted answer (upvoted) which mentions the event listeners available on the developer tools, I want to emphasize a simple, yet potentially useful point. If the expected event does not appear on the list, as expected, an alternative to a debugger is good plain old
console.log() to find out what’s going on.
As a practical example, it helped me to literally see the cause of the issue, when I logged the relevant
element.innerHTML at the right place. Particularly helpful after changes to the DOM.