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

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

本文关键字：ionicView enter 之间 时间 beforeEnter 何调试 调试      更新时间：2024-06-04

我使用ionic，$ionicView.beforeEnter和$ionicView.enter之间需要超过1s。

我如何才能发现我的代码的哪一部分花费了这么多时间？巴塔朗对我帮助不大，我想不出一个简单的方法来做到这一点。。。

可能没有太大帮助，但当我遇到类似的问题时，我无法使用Chrome调试探查器找到罪魁祸首，不得不逐一注释/排除控制器中的部分代码，我将其转换到控制器中。问题是在控制器初始化阶段配置的某些第三方日历组件减缓了转换（视图显示）。一旦评论出来，一切都很好。由于这不是我的代码，我也不想把它搞砸，所以我不得不在转换中添加一个进度微调器。

也许您可以使用Chrome提供的调试工具，如Timeline或Profile：您可以启动时间线的评测或记录，并检查$ionicView.beforeEnter和$ionicView.enter之间发生了什么。这两个功能都有一个搜索模块，因此您可以查找$ionicView.beforeEnter，并查看在$ionicView.enter之前需要什么时间。这可能不是最简单的方法，但希望它能帮助你。

您是否尝试过在控制台的"网络"选项卡中监控流量？以毫秒为单位的时间很好地指示了哪些xhr调用的运行时间比预期的要长。。。进行速度测试。

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

我想不出一种简单的方法来做到这一点。但是，在@nico_提到的基础上，使用chrome javascript调试工具，您应该在$ioniView.beforeEnter和$ionicView.enter上设置一个断点，然后在断点之间遍历代码。

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

"断点之间"没有代码。。。这两个事件之间调用了太多函数。。。

--Tyrius

您应该尝试识别运行时间过长的函数。

注意：我认为您的应用程序没有因下载而减慢速度，您可以在Chrome开发工具中检查下载时间（如果TTFB过高，则可能是服务器端速度较慢）。

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

  • 当有几个函数并且调用次数不多时：

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

  • 如果有很多函数被多次调用：

我建议你使用我的小JS工具MonitorJS来帮助你识别运行时间过长的代码块：

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

一旦你知道哪个函数花费了太多时间，你就可以缩小启动/停止的范围，以确定减缓应用程序运行速度的确切代码块并进行重构。

希望这能有所帮助！

相关文章：