JavaScript 追踪器

如何使用 JavaScript 追踪器

注意

此功能仍在开发中，可能会随时发生重大更改。您需要在 about:config 中将 devtools.debugger.features.javascript-tracing 首选项 设置为 true，然后才能打开 DevTools 使用它。

启用后，您可以通过三种方式切换追踪器

  • 从调试器中，通过其工具栏右上角的追踪器图标 image1。

    您可以右键单击此按钮（仅当追踪器关闭时）以配置其行为。

  • 从控制台中，通过 :trace 命令。

    您可以执行 :trace –help 以查看所有支持的可选参数。否则，:trace 将根据其当前状态启动或停止 JS 追踪器。

  • 从页面中，通过 Ctrl+Shift+5 快捷键（或 macOS 上的 Cmd+Shift+5）。

    触发此快捷键将根据 JS 追踪器的当前状态启动或停止它。这将使用调试器追踪器图标上下文菜单中当前定义的配置。

追踪器选项

日志输出

  • Web 控制台（默认）

    JS 追踪器会将所有 JS 函数调用记录到 Web 控制台面板。这有助于查看 JS 调用的精确顺序，相对于控制台中记录的任何内容：控制台 API 使用情况、异常、CSS 警告等。

    The JS Traces displayed in the Web Console

    （:trace –logMethod console）

  • 调试器侧边栏

    JS 追踪器会将所有 JS 函数调用记录到调试器面板的追踪器侧边栏中。这涉及一个专门用于浏览所有跟踪的用户界面。您可以轻松查看所有触发 JavaScript 代码的 DOM 事件，并以树的形式浏览所有堆栈。

    此 UI 处于开发原型阶段，将来可能会发生重大变化甚至被弃用。

    The JS Traces displayed in the Debugger sidebar

    （:trace –logMethod debugger-sidebar）

  • 分析器记录

    JS 追踪器将在后台记录所有 JS 函数调用。当您停止追踪时，跟踪结果将显示在一个新的标签页中，加载 Firefox 分析器 UI。在那里，您可以通过堆栈图表面板查看跟踪结果，还可以上传跟踪结果以便与他人共享。

    The JS Traces displayed in the Firefox Profiler UI

    （:trace –logMethod profiler）

  • 标准输出

    JS 追踪器会将所有 JS 函数调用记录到您的终端（假设您是从终端启动 Firefox 的）。当页面涉及大量 JS 活动时，此输出特别有用，因为它渲染速度更快。您还可以使用各种终端技巧来按您想要的方式过滤输出。请注意，源 URL 使用一些特殊字符进行标记，以便大多数终端允许您单击它们。如果 Firefox 是您的默认浏览器，则这些链接应在正确的位置打开调试器。假设这是记录跟踪的相同 Firefox 实例，并且是终端应用程序尝试打开的相同实例。并且您需要保持 DevTools 打开，否则链接将在新标签页中作为普通 URL 打开。

—DOM | click
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
——[baseline]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:39398 - λ dispatch
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40960 - λ fix
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:41576 - λ ce.Event
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:30171 - λ get
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:29696 - λ F
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40177 - λ handlers

（:trace –logMethod stdout）

延迟启动

有两种方法可以延迟 JS 追踪器的实际启动。两者都需要请求启动追踪器，方法是单击调试器追踪器图标，或运行 :trace 控制台命令，或触发快捷键。然后，追踪器将处于挂起模式，这由追踪器图标上的蓝色徽章指示。 image3

  • 在下次用户交互时

    追踪器仅在页面上第一次单击或按下键时才会真正开始记录函数调用。准确地说，追踪器将在第一个鼠标按下或键盘按下事件时启动。

    （:trace –on-next-interaction）

  • 在下次页面加载时

    追踪器仅在导航到另一个页面或重新加载当前页面时才会真正启动。它将在任何内容开始执行之前启动。这有助于查看页面上运行的第一个 JavaScript 代码。

    （请注意，此功能无法通过控制台命令使用。）

追踪函数返回值

您可以选择记录函数返回值，即函数结束并返回值时的精确执行顺序。默认情况下，此功能处于禁用状态，因为它使追踪器的输出加倍。

请注意，此选项默认情况下对分析器输出启用，且没有明显的性能损失，以便正确记录每个函数调用的持续时间。

../../_images/trace-returns.png

（:trace –returns）

追踪值

您可以选择显示所有函数调用参数以及函数返回值（如果已启用）。默认情况下，此功能处于禁用状态，因为它使追踪器的输出复杂化，使其速度变慢且可读性降低。

请注意，分析器输出不支持此功能。

../../_images/trace-returns-with-values.png ../../_images/trace-values.png

（:trace –values）

仅 Web 控制台命令的选项

  • 记录 DOM 变动

您可以选择追踪页面上发生的所有 DOM 变动。变动将根据其相对于修改 DOM 的 JavaScript 代码（JS 跟踪）的精确执行顺序出现，还包括错误、警告和控制台 API 日志。默认情况下，控制台命令参数 –dom-mutations 将记录所有类型的变动：添加到文档中的新节点、节点上更改的属性以及从文档中删除的节点。该参数还接受逗号分隔的选项列表，以控制应记录哪种类型的变动。

（:trace –dom-mutations === :trace –dom-mutations add,attributes,remove）

  • 深度限制

您可以选择限制记录的函数调用的深度。例如，将深度限制为“1”通常只会记录事件侦听器函数。即 Web 引擎调用的顶级函数。这允许大幅减少跟踪的输出，但可能会隐藏宝贵的信息。此选项不会自动停止追踪器。这只会忽略超过给定深度限制的嵌套函数调用。

例如，在 bugzilla 上，如果 :trace 没有任何参数，则会记录以下内容

—DOM | mousedown
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
——[baseline]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:39398 - λ dispatch
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40960 - λ fix
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:41576 - λ ce.Event
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:30171 - λ get
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:29696 - λ F
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40177 - λ handlers
—DOM | mouseup
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
——[baseline]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:39398 - λ dispatch
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40960 - λ fix
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:41576 - λ ce.Event
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:30171 - λ get
————[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:29696 - λ F
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40177 - λ handlers

运行 :trace –max-depth 1 将提供

—DOM | mousedown
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
—DOM | mouseup
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/

运行 :trace –max-depth 3 将提供

—DOM | mousedown
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
——[baseline]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:39398 - λ dispatch
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40960 - λ fix
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:30171 - λ get
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40177 - λ handlers
—DOM | mouseup
—[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:37892 - λ add/v.handle
——[baseline]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:39398 - λ dispatch
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40960 - λ fix
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:30171 - λ get
———[interpreter]—> https://bugzilla.mozilla.org/static/v20240305.1/js/jquery/jquery-min.js:2:40177 - λ handlers

（:trace –max-depth 5）

  • 记录限制

您可以选择限制记录的“记录”数量，之后追踪器将自动停止。一条记录由一个顶级函数调用组成，包括从该顶级函数调用的所有嵌套函数。

此选项与在下次用户交互时启用追踪器结合使用时特别有用。这可以帮助缩小范围，仅针对鼠标或键盘事件处理中的非常精确的代码进行操作。

（:trace –max-records 10）