How to find the place where a certain function is called?

Question

I'm writing a webpage, where I need to do some little changes. The problem is, I need to find the place, where one certain function is called (there are plenty of JavaScript files, so I'm not able to go through them line by line). Do you have any idea, how could I find it out?

I know how to do step-by-step debugging in Firebug or similar browser consoles, but still, I don't know how to recognize the place where the function was called.

I prefer working with consoles in Firefox or Chrome.

Answer 1

To get to know the caller of a function just set a breakpoint at the first line of it. Once the breakpoint gets hit, you can see within the stack trace from where it was called.

Firefox DevTools

Firebug

Chrome DevTools

Answer 2

Debugging Tips For Chrome:

There are probably a number of ways you can find out where a change is coming from. But I find this one a time saver when it comes to tracking down changes in the DOM. (which will usually lead me to a function I am looking for)

Break on subtree modification or attribute modifications. To do this right click on an element in the DOM tree. Specifically the one you think the change is being applied to. From there you will get a context menu which will give you these options. Selecting either one with set a DOM breakpoint.

If this triggers the debugger you can then proceed to step through the code by using F11 and shift + F11 to skip over functions (useful if you wind up in a library like jQuery). While doing this, pay attention to the call stack. This will tell you where the code is coming from..

More in depth information:

https://developer.chrome.com/devtools/docs/javascript-debugging

Answer 3

If you have access to the scripts, you could add at the end of every function you want to watch :

console.trace()

This will output in Chrome's console what function have been called with its position in the file (line number)