Running cycles in JavaScript application

Question

I have a large JavaScript application using only vanilla, jQuery, jQuery-UI and a WYSIWYG library which has performance issues and I'm suspecting it having infinite cycles running in the background. Is there a way to find what is really being done on the background from the developer console in the browser or is there some other way?

For example there are functions which do reverse tree traversing which are done with a while condition. If it's not met it obviously runs infinite without the user knowing. Other problems might be unterminated intervals, etc..

Answer 1

Chrome has a "timeline" tab in the web inspector, which can be used to record which JavaScript events are firing.

Press F12 to open it, then go to the "timeline" tab and begin a recording. Once you stop the recording, you can inspect closely which events are being fired and when.

This can help you spot things like an infinite loop in the code.

See also: the documentation for this tool .

Answer 2

I believe you could use the Timeline in the chrome inspector to see which functions are running at what time and for how long. I've found it easiest to always name my functions so I can inspect in the functions performance.

https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en#profile-js