如何查找JavaScript函数调用流程

Question

Is there any plugins to know the complete flow of JavaScript function call in the client side?

I did not find any thing such that in Firebug. But I am not confirm because my knowledge on Firebug is limited.

Or any there any other plugins or tools, except putting console out in every function and alerts?

Answer 1

you could try putting a debugger somewhere in the code and once the debugger is hit you can watch the stack trace. This would enable you to see the flow only until the point where debugger is hit though.

Answer 2

You can enable the script tab in Firebug and use the checkpoints for a particular script or JS file.

Read more about Script Panel

Answer 3

Most modern browsers allow you to view the stack trace while in debug mode. Firebug offers two different ways to get the stack trace of a function call.

1. Check the information inside the Script panel

   When the script execution is halted, you can also always see the stack trace inside the Script panel's toolbar as well as inside the Stack side panel .

2. Use console.trace()

   Prints an interactive stack trace of JavaScript execution at the point where it is called.

   The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script Panel, and click each argument value to inspect it in the DOM or HTML Panel.