javascript - 使用 Chrome 开发工具在 JavaScript 中查找无限(或非常大)循环

Question

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

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

编辑:我似乎记得最近某个地方的 chrome 开发工具演示显示了一个时间轴，该时间轴描绘了基于时间增量垂直堆叠的功能 block ，水平移动称为“火焰图”或类似的东西......那将是理想的，但是我现在记不起我这辈子的链接了。如果有人知道这个工具是什么，完全不反对在这个工具上使用 Canary？

Answer 1

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

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

因此，您需要记录一个 cpu profile 并查看它。

您也可以在其上使用 FlameChart View 。

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

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

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