I work on a large(ish) Ember app where the underlying data model (backend, API, etc.) was recently changed. I have made the necessary changes to the app and have everything working except in one specific view, where the page just hangs and causes the browser to trigger a warning about an unresponsive script.
I’m trying to figure out what’s happening. I’ve tried setting breakpoints all over the place and simply can’t pin down which code is actually running.
At this point I really have no idea how to go about finding the source of the issue. Do you have an ideas or know of some tools that might help me figure it out?
First, you can forcibly break into the running code by hitting the pause button in devtools. Where you end up when you do that is somewhat random, but it turns out your probability of being in the problematic code path is pretty high, since that’s what’s consuming most of the processor time. You may need to break repeatedly to get a feel for the different places you land. From there you’ll need to look for frames in the callstack that involve your custom code (as opposed to framework code) to get a sense for what things the app is doing that cause the work.
Second option is to divide-and-conquer by turning off parts of your app to narrow down on the source of the problem. For example, you can start by removing everything from the problematic template. Hopefully that makes the loop go away. Then add things back in to see what causes the problem to reoccur. When you identify a problematic component, repeat by paring away parts of it.
We had a legacy component that was doing a bunch of black magic with custom callbacks, after-render hooks and so on. It was pretty ugly but fortunately we could simply remove the component entirely.
