How to debug JAVASCRIPT events? Or how to make all functions call trace?

user_423585 0
Viewed 24035

For example there is a button. It is wrapped by <div>.

When pressing to this button, there is Javascript function call happen, then another function, then calling by ajax to the server and if it's OK, Javascript redirecting this page to another page.

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 onclick i.e. event listener is connected in Javascript.

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:)

dom-events trace events javascript
4 Answers

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.

user_53627950
Related