如何调试 $ionicView.beforeEnter 和 $ionicView.enter 之间的时间

Question

我用的是ionic，从$ionicView.beforeEnter到$ionicView.enter用了1s多。

如何找到我的代码的哪一部分花费了这么多时间？ Batarang 对我帮助不大，我想不出一个简单的方法...

Answer 1

也许您可以使用 Chrome 提供的调试工具，如时间线或配置文件：您启动时间线的分析或记录，并检查 $ionicView.beforeEnter 和 $[=15 之间发生了什么=].这两个功能都有一个搜索模块，因此您可以查找 $ionicView.beforeEnter 并查看在 $ionicView.enter 之前花费的时间。这可能不是最简单的方法，但希望它能对你有所帮助。

Answer 2

可能不是很有帮助，但是当我遇到类似问题时，我无法使用 Chrome 调试分析器找到罪魁祸首，并且不得不 comment/exclude 我的控制器中的部分代码，我将其转换为，一个接一个。问题是在控制器初始阶段配置的某些第三方日历组件正在减慢转换（视图显示）。一旦注释掉一切正常。由于这不是我的代码，我不想弄乱它，所以我不得不在过渡时添加一个进度微调器。

Answer 3

我想不出一个简单的方法来做到这一点。但是扩展@nico_提到的内容，使用 chrome javascript 调试工具，您应该在 $ioniView.beforeEnter 上设置一个断点，在 $ionicView.enter 上设置一个断点，然后逐步执行代码之间的代码断点。

您可以在此处阅读有关 chrome 的 javascript 调试工具以及如何设置断点的更多信息： https://developer.chrome.com/devtools/docs/javascript-debugging

Answer 4

您是否尝试过在控制台的“网络”选项卡中监控流量？以毫秒为单位的时间是一个很好的指标，表明哪些 xhr 调用运行ning 比预期的时间长... 运行 a speed test.

否则，如果您使用 chrome，我会在 Ionic 视图状态的整个流程中删除一些 debugger 语句。

Answer 5

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

-- Tyrius

您应该尝试识别花费太多时间的函数运行。

注意： 我假设您的应用不会因下载而变慢，您可以在 Chrome 开发工具中检查下载时间（如果 TTFB 太高，您可能有服务器端缓慢）。

如果您知道调用了哪些函数，则有两种可能性：

当函数很少且调用次数不多时：

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

如果函数调用次数多:

我建议您使用我的名为 MonitorJS 的小 JS 工具来帮助您识别花费太多时间的代码块运行 :

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

当你想知道哪个函数占用太多时间时，调用这个函数：

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

一旦您知道哪个函数花费了太多时间，您就可以缩小 Start/Stop 的范围，以识别拖慢您的应用程序并重构的确切代码块。

希望对您有所帮助！

如何调试 $ionicView.beforeEnter 和 $ionicView.enter 之间的时间

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

javascript

profiling

angularjs

ionic-framework