CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-devtools
Guifan Li
Guifan Li

Reputation: 1653

Chrome developer tool trace function sequences

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!

Upvotes: 11

Views: 12699

Answers (1)

Leo
Leo

Reputation: 13828

  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.

    enter image description here

  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.

    enter image description here

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.

Upvotes: 10

Related Questions