Chrome 中的 Javascript 执行跟踪 - 如何？答案

【问题标题】：Javascript execution tracking in Chrome - how?Chrome 中的 Javascript 执行跟踪 - 如何？
【发布时间】：2012-02-25 22:58:15
【问题描述】：

我在网站上加载了大约 100-200 个 javascript 函数。我想确定当我在 Google Chrome 中单击一个或另一个项目时执行的 javascript 函数。我如何使用 Chrome Web 开发者工具来做到这一点？谢谢！

【问题讨论】：

“我在网站上加载了大约 100-200 个 JavaScript 函数。”因为，“这对客户有帮助吗？”从来没有问过。

标签： javascript debugging google-chrome google-chrome-devtools

【解决方案1】：

暂停执行的替代方法（通常效果很好，但在频繁执行周期性代码的页面上效果不佳）

您可以使用 chrome 的 profiler 记录一小段时间。完成录制后，它将向您显示在录制期间执行的任何功能所花费的 cpu 时间摘要。我们并不真正关心 CPU 时间，只是使用这个工具，因为它会告诉我们执行了哪些函数。

基本上只是开始录制：

注意：在 Chrome 58 及更高版本中，此选项卡已重命名为“内存”。 Reference

然后执行您的操作（例如，单击网页上的按钮，或执行任何会导致有趣代码执行的操作）。然后停止录制并查看结果：

请注意，我使用的是“自上而下”查看模式 - 它向您显示调用堆栈，您可以深入查看最终调用了哪些函数。例如，首先调用了某个匿名函数（可能是由于 setTimeout 或某些单击事件处理程序的结果），然后它调用了一些由 s.track.s.t 标识的方法，然后调用 s_doPlugins 等等......重要的是是在自顶向下模式下，树顶部的条目形成调用堆栈的开始，因此它们通常是由某个计时器函数注册的函数（setTimeout，setInterval，requestAnimationFrame 等...）或某些事件处理程序（click、mousemove、load 等...）。

您还可以使用“图表”查看模式，从左到右显示在何时调用了哪个函数。这可以帮助您确定您真正要查找的功能，因为您可能知道代码在录制中执行的时间（例如，就在中间）。

顺便说一句 - 我相信大多数其他现代浏览器都具有类似的功能。

【讨论】：

在 Chrome 88 中，它现在位于“性能”下，它会生成一个不同的时间线。

【解决方案2】：

一种简单的方法是启动 Chrome 开发者工具，切换到 Sources 面板并点击 F8（暂停执行）。这将在第一个执行的 JavaScript 语句处中断。

另一种方法是为 mousedown 或单击设置事件侦听器断点：在同一 Sources 面板中，展开右侧边栏中的“Event Listener Breakpoints”。展开“鼠标”项并检查要中断的事件（例如“单击”、“鼠标按下”）。然后在您的页面中单击并在 DevTools 中查看 JS 执行中断。享受吧！

【讨论】：

非常感谢！如果我在 FCKeditor 中选择文本，“鼠标左键”，将鼠标移动到另一个位置并释放，我应该捕获什么鼠标事件。
我试过了，但是……还是不行……我自己试试。谢谢！
OK，然后检查整个“鼠标”类别以中断所有与鼠标相关的事件侦听器（您可能想取消选中“鼠标移动”）。如果您仍然失败，您可以检查所有类别，如果您遇到不相关的事件，则一一取消选中。
嗨，我有类似的问题，情况几乎相同，但在我的情况下，我只想跟踪整个 javascript 执行......我想看看哪些功能可以工作，不只是暂停或设置断点？像traceGL这样的东西......我需要了解网页是如何工作的......（我的javascript库现在太大了，因此我需要做一些优化并找到代码重复......）

【解决方案3】：

我想确定当我在 Google Chrome 中单击一个或另一个项目时执行的 javascript 函数。

现在有一个很棒的扩展名为 Visual Event 可以做到这一点。它只识别通过流行的 js 库（jQuery、YUI、MooTools、Prototype、Glow）和 DOM Level 0 事件设置的事件处理程序。

【讨论】：

效果很好。不确定安全性，所以当我不调试时我就离开了。
看起来扩展被删除了 :( 好久没更新了