How can I trace MY javascript?

Question

I am inheriting a new ASP.Net MVC application, which has javascript and jQuery (along with Kendo) all over the place. Some of it is inline, some of it is in .js files, etc.

There is a lot of duplicate code, so trying to figure out exactly what function is called when a specific button is pressed is maddening.

If I try and do a stack trace in Firebug, I end up with almost entirely jQuery and Kendo functions, which makes it all but impossible to figure out which of MY javascript functions have been called.

How can I easily trace that pressing THIS button called THESE functions in MY code, and ignoring all the Kendo/jQuery calls?

Answer 1

What about putting console.log statements in the code, so you can follow it through.

Also if haven't bundled the JavaScript files and run Internet Explorer from visual studio you can use the VS debugger to trace the file.

Answer 2

Drop a 'debugger;' statement into various spots in the code. Open the chrome javascript console (ctrl-alt-j, command-alt-j), and interact with the page as normal. The debugger statement will act as a breakpoint, and you can trace the code from there.

For example, say you have a click handler, foo:

function foo(event) {
   debugger; // breakpoint will happen here
   ...click handler logic
}

Answer 3

You can try to override jQuery click or bind function and to display binded function. It's ugly but for debug it could help.

Answer 4

There are some good suggestions on this answer.

Visual Event might also help alot.