我正在尝试使用Chrome检查器性能选项卡分析和优化mobx应用程序。下面有一个屏幕截图。
此堆栈跟踪中的许多信息都是误导性的,没有帮助,因为它指向内部mobx函数,如trackDerivedFunction
。因为mobx @computeds
依赖于get
helper,所以可以看到堆栈底部的跟踪是对get
的多次调用,没有多少有用的信息。其中一些确实链接到我代码中的实际函数,但是一些链接到更多的内部mobx。
你可以看到有很多对endAction
的调用,有什么方法可以显示这是什么操作吗?我正在寻找任何其他mobx插件或devtools的建议,以帮助这一点。
2条答案
按热度按时间vsmadaxz1#
Mobx间谍工作相当不错的跟踪什么行动被触发。
https://mobx.js.org/refguide/spy.html
mo49yndu2#
这个堆栈跟踪中的很多信息都是误导和无用的,因为它指向内部的mobx函数,如trackDerivedFunction。
为什么这会是误导和无益的呢?这是正在运行的代码。很明显,你不能在这个图表中包含100%的代码,它必须跳过较短的代码。它动态地决定这一点。
Flamecharts没有区分各种来源。它们只是跟踪函数运行了多长时间,如果合理的话,就会显示出来。
如果图表包含了您想要的所有信息,它甚至不会正确显示,因为它将有数千个,如果不是数百万个,微小的项目。
你可以看到有很多对
endAction
的调用,有没有什么方法可以显示这是什么动作?以下几个简单的方法来实现这一点:
console.log
**。如果函数被多次命中,这可能更实用。*放大图表。也许你可以看到哪个派生函数花了这么长时间,因为仍然有低于
trackDerivedFunction
的项。*人为地让代码运行时间更长:如果你知道有什么东西被击中,但它只是不显示(它允许异步),你可以插入一个函数,让它休眠一秒钟左右,你一定会找到它。另一种选择是插入一个
confirm
,它将阻塞所有内容,因此肯定会使代码块在图上可见。