Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 631
Guifan Li Avatar asked Apr 19 '15 02:04

Guifan Li


People also ask

What is Chrome DevTools and how does it work?

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

How do I Break The mouseDown event in Chrome Developer Tools?

One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8(Pause Execution). This will break on the first executed JavaScript statement. Another approach is to set an event listener breakpoint for mousedown or click: in the same Sources panel, expand the "Event Listener Breakpoints" in the righthand sidebar.

How to break a JavaScript statement in Chrome Developer Tools?

3 Answers 3 ActiveOldestVotes 100 One simple approach is to start Chrome Developer Tools, switch to the Sources panel and hit F8(Pause Execution). This will break on the first executed JavaScript statement.

What is timeline events mode in Chrome DevTools?

The timeline events mode displays all events triggered while making a recording. Use the timeline event reference to learn more about each timeline event type. A comprehensive reference of accessibility features in Chrome DevTools. A guide on navigating Chrome DevTools using assistive technology like screen readers.


1 Answers

  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.

like image 114
Leo Avatar answered Sep 20 '22 21:09

Leo