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

【问题标题】：How to debug time between $ionicView.beforeEnter and $ionicView.enter如何调试 $ionicView.beforeEnter 和 $ionicView.enter 之间的时间
【发布时间】：2016-04-13 18:27:54
【问题描述】：

我用ionic，在$ionicView.beforeEnter和$ionicView.enter之间用了1s多。

我怎样才能找到我的代码的哪一部分花费了这么多时间？ Batarang 对我帮助不大，我想不出一个简单的方法来做到这一点......

【问题讨论】：

你能分享你的代码吗？所以我会检查它
不，我不能。这是一个相当大的项目......我正在寻找一个通用的解决方案，我可以将其用于其他项目，并且可能对社区有所帮助......

标签： javascript angularjs ionic-framework profiling

【解决方案1】：

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

【讨论】：

我会试试这个。但如果是一些指令或类似的东西，调试可能真的很长......

【解决方案2】：

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

【讨论】：

我应该在我的第一个问题中说明它，但是 angular/ionic 调用了很多不同的函数，以至于分析器非常没用......但我会试着用搜索模块。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

断点之间没有代码……两个事件之间调用了这么多函数……
您可能没有在断点之间编写任何代码，但是在这两个事件之间运行了很多离子代码，您应该单步执行代码或分析两个断点，看看哪些函数占用了大部分时间...

【解决方案5】：

“断点之间”没有代码……这两个事件之间调用了很多函数……

-- 提瑞斯

您应该尝试找出运行时间过长的函数。

注意：我假设您的应用没有因下载而变慢，您可以在 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

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

希望这会有所帮助！

【讨论】：