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

Question

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

这件事正在冻结我的应用程序，我宁愿尽可能避免对其代码进行更改，即使是为了调试。我很乐意澄清任何不清楚的地方。

编辑：我似乎记得最近 chrome 开发工具的演示在某处显示了一个时间线，该时间线描绘了基于时间增量垂直堆叠的功能块，称为“火焰图”或类似的东西......那将是理想的，但我可以'现在我一辈子都不记得这个链接了。如果有人知道这个工具是什么，那么根本不反对在这个工具上使用 Canary 吗？

Answer 1

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

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

因此，您需要记录 cpu 配置文件并进行查看。

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

您可以单击 BottomUp 或 TopDown 甚至 FlameChart 栏中的某个项目，然后在“源”面板中查看函数主体。

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

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