Search code examples
javascriptdebugginggoogle-chrome-devtoolsaurelia

Browsers become unresponsive due to a long running script - How can I find the script responsible?

I'm currently facing a peculiar problem. In our QA environment we found that a specific entity is causing browsers to become unresponsive. It is a quite large Aurelia project so even if I have the entity causing the page to be unresponsive there are several thousand lines of JavaScript that I would have to debug to find out why this is happening. To make matters worse we are also using expressionObserver on BindingEngine to detect when properties are changing and other event based functionality. This means that following a synchronous flow is therefore not that easy either.

I have tried running Chrome Performance but the profiler lags out.

enter image description here

Is there some way that I can target the specific code causing the lag or do I have to step through the code line by line?

Chrome:

enter image description here

Page Unresponsive You can wait for it to become responsive or exit the page.

Firefox:

enter image description here

A web page is slowing down your browser. What would you like to do?

Edge:

enter image description here

is not responding.

Internet Explorer 11:

enter image description here

is not responding due to a long-running script.

Solution

  • Using the Performance monitor in FireFox it was possible to stop script execution and look at the methods executing before the application became unresponsive. Thanks to @Teemu.

    enter image description here