4

我正在使用似乎有很多问题的第三方统计库。它既大又压缩,因此调试起来并不是特别容易。我正在使用 Chrome 开发工具,我想知道可能有哪些选项可以根据函数名称的调用次数对函数进行排名?我认为答案是 Profiler 选项卡,但我捕获的配置文件仅记录了长链中引用“第 1 行”的 JS 文件。

这件事正在冻结我的应用程序,我宁愿尽可能避免更改他们的代码,即使是为了调试。我很高兴澄清任何不清楚的地方。

编辑:我似乎记得最近某处的 chrome 开发工具演示显示了一个时间轴,该时间轴描绘了基于水平方向的时间增量垂直堆叠的功能块,称为“火焰图”或类似的东西......这将是理想的,但我可以'不记得现在的链接为我的生活。如果有人知道这个工具是什么,不反对在这个上使用 Canary?

4

2 回答 2

3

关于 DevTools 的最新视频在这里http://youtu.be/x6qe_kVaBpg?t=19m44s

它涵盖了有关 DevTools 的不同主题,还包括有关 CPU 配置文件的部分。

因此,您需要记录一个 cpu 配置文件并查看它。

自底向上视图

您也可以在其上使用 FlameChart 视图。

火焰图视图

您可以单击 BottomUp 或 TopDown 甚至 FlameChart 栏中的项目,然后在 Sources 面板中查看函数体。

缩小版

如果您的来源被缩小,如屏幕截图所示,那么您可以在来源面板的状态栏中按一个按钮。它看起来像两个花括号 {}。然后 DevTools 将格式化源代码。

漂亮的印刷版

并且该操作将影响到所有其他位置(如时间轴、CPUProfile 等)的源文件的所有链接。作为第一个快照中的示例,您看到了位于脚本缩小版本的第 778 行的函数 O.Pk。漂亮打印源文件后,函数的链接会自动更改。现在它指向 15871 行。

更改的链接

于 2013-05-30T20:44:31.957 回答
0

看起来答案是“时间轴”选项卡。似乎可以在常规铬中工作。我在触发导致挂起的操作之前将选项卡设置为录制,一旦挂起停止(大约需要 20 秒),我停止录制并使用左右选择器放大主时间线(在顶部)在选择“事件”的情况下,我看到更长的执行期(在顶部)。

捕获后的时间轴选项卡

从那里我只是扩展了下拉列表,我得到了我想要的东西。(我模糊了 js 文件名以避免单出库)但我包括了一个屏幕截图。

于 2013-05-30T19:13:15.713 回答