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

Question

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

Solution

Yeah - this sort of thing is not as simple is 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 element.

You can also use the debugger keyword to set a breakpoint in the call stack somewhere. Then use your favorite javascript debugger (built-in dev tools in Safari, Google Chrome & IE8, firebug for Firefox). In each of these, there's a call stack that'll allow you to navigate through the current call stack.

Comments

[antinome]

This also doesn't answer the question.

[Daniel Möller]

What if the element is not visible or not part of the DOM?