如何调试$ ionicView.beforeEnter和$ 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

Answer 5

There is no code "between the breakpoints"... There are so much functions called between the 2 events...

-- Tyrius

You should try to identify functions that are taking too much time to run.

Note: I assume your app is not slowed down by downloads, you can check you downloads time in Chrome Dev Tools (If TTFB is too high, you might have a server-side slowness).

If you know which functions are called, you have two possibilities :

• When there is a few functions and not called too many times:

   function ExampleFunction() { console.time("ExampleFunction"); // ExampleFunction code // ... console.timeEnd("ExampleFunction"); // output in console time between time() call and timeEnd() call } 

• If there is a lot of functions called many times :

I suggest you to use my little JS tool called MonitorJS to help you identify code blocks taking too much time to run :

function ExampleFunction() {
    let mId = Monitor.Start("ExampleFunction");
    // ExampleFunction code
    // ...
    Monitor.Stop(mId);
}

and when you what to see which function is taking too much time, call this function :

function ShowMonitorRecords() {
    // get all records sorted by total_time desc
    let records = Monitor.GetAll().sort((a,b)=>{ return b.total_time - a.total_time; });
    // print every records
    for (let record of records) {
        let avg = record.total_time / record.call_count;
        console.log(record.name + ": " + record.total_time.toFixed(2) 
            + "ms - called " + record.call_count 
            + " time(s) - average time : "+ avg.toFixed(2) +"ms");
    }
}

// will output something like :
// Foo: 7234.33ms - called 2 time(s) - average time : 3617.16ms
// Bar: 6104.25ms - called 3 time(s) - average time : 2034.75ms

Once you know which function is taking too much time, you can reduce the scope of Start/Stop to identify the exact block of code slowing down your app and refactor.

Hope this helps !