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

我使用，

$ionicView.beforeEnter

和

$ionicView.enter

之间需要1秒以上的时间

---

我怎样才能找到我的代码的哪一部分占用了这么多时间？Batarang帮不了我多少忙，我想不出一个简单的方法来做这件事……

也许你可以使用Chrome-like Timeline或Profile提供的调试工具：你启动profiling或Timeline的记录，检查$ionicView.beforeEnter和$ionicView.enter之间发生了什么。这两项功能都有一个搜索模块，因此您可以在输入前查找

$ionicView.before

，并查看在

$ionicView.enter

之前需要花费的时间。这可能不是最简单的方法，但希望它能对您有所帮助。

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

我想不出一个简单的方法。但是扩展@nico_uu提到的内容，使用chrome javascript调试工具，您应该在

$ioniView.beforenter

上设置一个断点，并在

$ionicView.enter上设置一个断点，然后在断点之间遍历代码

您可以在此处阅读有关chrome的javascript调试工具以及如何设置断点的更多信息：
您是否尝试过在console的“网络”选项卡中监视流量？以毫秒为单位的时间很好地指示了哪些xhr调用运行的时间比预期的长。。。运行一个

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

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

--提利乌斯

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

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

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


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

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


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


我建议您使用我的小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

一旦你知道哪个函数占用了太多的时间，你就可以减少启动/停止的范围，以确定减缓应用程序和重构的确切代码块

希望这有帮助
 你能分享你的代码吗？所以我会检查的不，我不能。这是一个相当大的项目。。。我正在寻找一个通用的解决方案，可以用于其他项目，对社区有帮助…断点之间没有代码。。。在这两个事件之间调用了太多函数…您可能没有在断点之间编写任何代码，但是在这两个事件之间运行了很多ionic代码，您应该一步一步地浏览代码或分析两个断点内的函数，以查看哪些函数占用了大部分时间…我将尝试一下。但是如果它是一些指令或类似的东西，调试可能会非常长…我应该在我的第一个问题中说明它，但是angular/ionic调用了太多不同的函数，所以分析器是非常无用的。。。但我将尝试使用搜索模块查看它。