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

Question

Hello everybody!

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

Thanks for replies!

Answer 1

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 2

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

Answer 3

Yeah - this sort of thing is not as simple is you would like.

Google Chrome has 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.

You can also use the "debugger" keyword to set a breakpoint in the callstack 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.