使用Chrome开发工具在JavaScript中查找无限（或非常大）的循环

Question

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

这个东西冻结我的应用程序，我宁愿尽可能避免更改他们的代码，即使它是为了调试。 我很乐意澄清任何不清楚的事情。

编辑：我似乎记得最近一个chrome dev工具的演示，显示了一个时间线，描绘了根据水平时间增量垂直堆叠的功能块，称为“火焰图”或类似的东西......这将是理想的，但我可以'记住我现在生活中的链接。 如果有人知道这个工具是什么，不反对在这个上使用Canary吗？

Answer 1

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

它涵盖了有关DevTools的不同主题，并且还包含有关CPU配置文件的部分。

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

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

您可以单击BottomUp或TopDown中的项目，甚至可以单击FlameChart栏，然后在“源”面板中查看功能正文。

如果您缩小了源，如屏幕截图所示，则可以按“源”面板状态栏中的按钮。 它看起来像两个花括号{}。 然后DevTools将格式化源。

并且该操作将影响所有其他位置（如Timeline，CPUProfile等）中源文件的所有链接。例如，在第一个快照中，您看到了一个函数O.Pk，该函数位于脚本缩小版本的第778行。 在相当打印源文件后，该功能的链接自动更改。 现在它指向15871线。

Answer 2

看起来答案是“时间轴”选项卡。 似乎在普通镀铬工作。 我将标签设置为在触发导致挂起的操作之前记录，一旦挂起停止（大约需要20秒），我停止录制并使用左右选择器放大主时间轴（在顶部）我看到更长的执行期（在顶部）选择了“事件”。

从那里我只是扩大了下拉菜单，我得到了我想要的东西。 （我模糊了js文件名，以避免单独删除库）但我包括一个截图。