How to debug time between $ionicView.beforeEnter and $ionicView.enter

Question

I use ionic, and it takes more than 1s between $ionicView.beforeEnter and $ionicView.enter.

How can I find which part of my code is taking so much time? Batarang is not helping me much and I can't figure out an easy way of doing this...

Answer 1

Probably not very helpful but when I had a similar issue I could not find the culprit using Chrome debug profiler and had to comment/exclude parts of the code in my controller, which I transition to, one by one. The problem was that some third party calendar component being configured in the controller init stage was slowing the transition (view display). Once commented out everything worked fine. Since this was not my code and I did not want to mess with it I had to add a progress spinner on the transition.

Answer 2

Maybe you can use the debug tools provided with Chrome like Timeline or Profile : you start the profiling or the record of the timeline and check what happens between $ionicView.beforeEnter and $ionicView.enter. Both features have a search module so you can look for $ionicView.beforeEnter and see what is taking time until $ionicView.enter. It's probably not the easiest way but hope it will help you.

Answer 3

Have you tried monitoring the traffic in the Network tab in console? The time in ms is a good indicator of which xhr calls are running longer than expected... run a speed test.

Otherwise, if your using chrome, I would just drop some debugger statements throughout the flow of that Ionic view's state.

Answer 4

I cannot think of an easy way of doing this. But extending on what @nico_ mentioned, using the chrome javascript debug tool, you should set a breakpoint on your $ioniView.beforeEnter and a breakpoint on $ionicView.enter then step through the code between the breakpoints.

You can read more about chrome's javascript debug tools and how to set up breakpoints here: https://developer.chrome.com/devtools/docs/javascript-debugging