Chrome Developer Tool Tracing Functional Sequences

Question

I'm new to the Chrome developer app, and I found it to be very powerful. I'm currently looking for a way to track the flow of functions when opening a webpage, and also, I am wondering if there is a way how I can find which function launches the element when clicked. Here are some examples:

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

2) Which function launches an element in javascript: For example, I have one button on a web page, there is one or more functions associated with this element. Using the "Event Listener" tool for the Chrome developer, I can only see some DOM elements in "Click", and with what function it is associated.

Is there a way to find related functions?

I thank you for your help!

Answer 1

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

  

• In the Elements panel, there is an Event Listeners tab in which you can see that all event handlers are associated with the element, as well as where it is in the source code.

  

I suggest you read a few manuals, for example this and this , and more. So you can learn more about this and increase your development.