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

Answer 1

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 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.

Answer 2

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, 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.

Answer 3

You can use firebug to trace the javascript code. Its plugin of Firefox to trace the styles (css), js and also allows to edit.

Opera provides dragonfly which is similar to firebug

Answer 4

Check out the debugging features in Firebug, it'll let you add JavaScript breakpoints and step through your code.