Chrome developer tool trace function sequences

Question

I am a newbie to Chrome developer tool and I found it is very powerful. Currently, I am looking for a way to trace the flow of functions when I open a webpage and also, I am wondering is there s how can I find which function does an element trigger when it is clicked. Here are some examples:

1) Tracing function sequences: For example, there are 20 functions in my script. Some of the functions will call the other functions. I would like to trace the function calls. Like which function is called first and then what functions are called following by this function. Since these 20 functions are pretty huge, it is quite hard to follow the sequence by just looking at the script.

2) Which function does an element trigger in javascript: For example, I have one button on the webpage, there is one or are more functions associated with this element. By using the Event Listener of Chrome developer tool, I can only see some DOM elements under "Click" rather what function it is associated with.

Is there a way to find associated functions?

I appreciate you help!

Answer 1

1. In Sources panel, there is a Call Stack tab, in which you could see the function call stack when code execution was halted at break points.

   

2. In Elements panel, there is an Event Listeners tab, in which you could see all event handlers bond to the element, as well as where it is in source code.

   

I suggest you to read some tutorials, for example this and this, and there are more. So that you could know more about it and boost your development.