DataSpell 2025.2 Help

运行跟踪选项卡

该选项卡由一个工具栏和三个窗格组成: 事件面板事件堆栈面板快速评估面板

事件工具栏

使用工具栏上的按钮控制要捕获的事件范围、配置其显示方式,并在捕获的事件列表中导航。

项目

工具提示和快捷键

描述

全部展开按钮

展开全部 Ctrl+NumPad +

点击此按钮以展开列表中的所有节点。

“全部折叠”按钮

折叠全部 Ctrl+NumPad -

点击此按钮以折叠列表中的所有节点。

上一个

向上堆栈跟踪

点击此按钮以导航到堆栈跟踪中的上一个跟踪页面。

下一个

向下堆栈跟踪

点击此按钮以导航到堆栈跟踪中的下一个跟踪页面。

单击导航

单击导航

按下此切换按钮以使 事件 窗格中的列表自动与 编辑器 同步。

  • 当按钮被按下时:一旦您点击 事件 窗格中的某个事件,该事件的详细信息将显示在 事件堆栈 窗格中,并且由该事件调用的脚本会自动在编辑器中打开。

    当您在启用 自动滚动到跟踪 模式的情况下浏览 事件堆栈 时,相应的文件也会在编辑器中自动打开,并高亮显示调用的函数。

  • 当按钮被释放时:只有在 事件堆栈 窗格中双击事件时,由该事件调用的脚本才会在编辑器中打开。

捕获事件

捕获事件

点击此按钮以配置要捕获的事件范围,并在 事件 列表中显示。

默认情况下,Spy-js 会捕获所有已打开网页上的所有事件,排除 https secure 网站,除非您在运行配置中明确指定其 URL 地址。 所有捕获的事件都显示在 事件 窗格的 Spy-js 工具窗口中。 您可以通过应用用户定义的事件过滤器来抑制某些类型事件的捕获。 当您点击 Filters 时,列表会显示所有可用的过滤器,当前应用的过滤器会用勾号标记。 默认情况下,会应用 捕获所有 预定义过滤器。 要在不中止应用程序的情况下停止捕获事件,请选择 静音所有。 有关更多信息,请参阅 配置事件捕获策略

定义自定义事件过滤器:

  1. 点击 捕获事件 ,然后从列表中选择 编辑捕获排除项

  2. 在打开的 Spy-js 捕获排除对话框中,点击左侧窗格中的 Add

  3. 在右侧窗格中,在 排除名称 字段中指定过滤器名称,并配置排除规则列表。

    • 要添加规则,请点击 向排除项添加条件 对话框将打开。 在 值/模式 字段中输入模式,在 条件类型 列表中指定该模式是应用于事件类型还是脚本名称。 请注意,使用了 全局模式匹配。 当您点击 确定 时,DataSpell 将带您到 Spy-js 捕获排除项对话框

    • 要编辑规则,请在列表中选择规则,点击 ,并在打开的对话框中更新规则。 要删除规则,请在列表中选择规则,然后点击

要激活过滤器,请在列表中选中所需过滤器旁边的复选框。

设置

点击此按钮以从跟踪中移除所有或部分事件,并在编辑器中关闭相应的跟踪文件。 从显示的列表中选择以下选项之一:

  • 移除所有: 选择此选项以取消所有已捕获事件的跟踪,但不关闭编辑器中的跟踪文件。

  • 关闭所有跟踪文件: 选择此选项以关闭编辑器中的所有跟踪文件,但继续跟踪相应的事件。 要从跟踪中移除事件或脚本并关闭编辑器中的相应跟踪文件,请从事件或脚本的上下文菜单中选择 移除

  • 移除所有非活动项: 选择此选项以移除所有已不再活动的页面节点(例如,因为这些页面已在浏览器中关闭)。

  • 保存跟踪: 选择此选项以保存当前会话的图像。 Spy-js 将跟踪会话的调用和属性存储在 .json 文件中,这些文件可以压缩成 压缩包 存档。 您可以随时提取它们以将跟踪会话镜像加载到 Spy-js。

  • 加载跟踪: 选择此选项以将先前保存的跟踪会话图像加载到 Spy-js 中。 存储该会话调用和属性的 .json 文件将被提取并导入。

    请注意,加载的图像不会恢复会话,因为实际上没有执行任何脚本。 您能做的只是分析以前执行代码的流程和属性。

  • 会话停止时关闭所有跟踪文件: 选择此选项以在您点击 停止 按钮 停止 ,通过标准 shutdown 脚本外部停止跟踪会话时,关闭编辑器中的所有跟踪文件。

    点击按钮一次会调用 soft kill ,允许应用程序捕获 SIGINT 事件并执行正常终止(在 Windows 上, Ctrl+C 事件是模拟的)。 按钮被点击一次后,它将被替换为 “Kill Process” 按钮 ,这表示后续点击将导致应用程序被强制终止,例如在 Unix 上会发送 SIGKILL

  • 启用 Spy-js 自动完成和放大镜: 选择此选项以使用运行时数据扩展基本补全列表(Spy-js 自动补全 ),并在不实际运行调试会话的情况下评估表达式(Spy-js 放大功能)。 默认情况下,此功能处于关闭状态。

    术语 Spy-js 自动补全指的是使用从运行时数据中检索的建议扩展 基本补全列表。 功能 Spy-js 自动补全可用于 源文件中已执行的代码(在相应的 跟踪文件中以绿色高亮显示)。

    当您将插入点放置在源文件中的某个符号上并按下 Ctrl+Space 时, Spy-js 会从浏览器或正在运行的 Node.js 应用程序中检索数据,并根据以下规则将其与基本补全列表合并:

    如果一个对象既出现在基本补全列表中又从运行时中检索到,则会保留提供更多关于参数、属性及其类型等信息的选项。 保留在列表中。

    术语 Spy-js 放大功能指的是在不实际运行调试会话的情况下 评估表达式。 当您点击一个表达式或将插入点放置在其上并按下 Ctrl+Alt+F8 时,会在表达式下方显示一个工具提示,显示该表达式的值。 如果 Spy-js 检索到多个值,请点击工具提示中的 图标以展开值列表。

    功能 放大功能可用于 源文件中已执行和未执行的代码。

  • Spy-js 支持 源映射 ,这意味着您现在可以从 事件堆栈 窗格直接跳转到 ECMAScript 6TypeScriptCoffeeScript 的原始源代码,并查看哪些代码片段已被执行。 使用以下选项配置源映射的处理方式:

    • 启用源映射查找: 选择此选项以启用导航到使用编译期间生成的源映射的 ECMAScript 6TypeScriptCoffeeScript 源代码。

    • 启用源映射生成: 选择此选项以为所有内容生成源映射,以映射已插桩的代码。 如果您打算在 Chrome Dev ToolsFireFox FireBug 开发工具中调试原始代码,请选择此选项。

    • 如果可用,总是打开源映射跟踪: 选择此选项以让 Spy-js 尝试在您从事件导航到其调用者时打开 映射的跟踪文件

事件窗格

窗格显示了捕获事件的树状结构。 顶级节点表示参与跟踪的 文档 ,即网页。 当您将鼠标悬停在 文档上时,DataSpell 会显示一个工具提示,其中包含 文档的 URL 地址、打开该文档的浏览器以及运行该浏览器的操作系统。 文档节点还配有一个图标,用于指示其打开的浏览器。

在每个 文档 节点下,列出了页面上检测到的事件和从中启动的脚本。 相同类型的事件被分组到可视化容器中。 容器的标题显示分组事件的名称、容器内所有事件的平均执行时间以及容器内的事件数量。 您可以展开每个节点并检查其中的单个事件。

脚本文件名具有不同的颜色指示器,可帮助您在使用 事件堆栈 窗格时区分它们。 将鼠标悬停在脚本文件名上,您可以看到完整的脚本 URL。

一旦点击某个事件,其调用堆栈将显示在 事件堆栈 窗格中。 堆栈以函数调用的树状结构表示。

文档节点的上下文菜单

菜单项

描述

移除

选择此选项以取消跟踪所选页面上的所有脚本,并从 事件 窗格中移除所选节点及其下的所有项目。 所有当前打开的跟踪文件仍然在编辑器中打开。

移除所有子项

选择此选项以删除所选页面下的项目,但继续跟踪该页面,以便仍然接收来自该页面的新事件。 文档节点本身仍保留在 事件 窗格中,所有当前打开的跟踪文件仍然在编辑器中打开。

移除并关闭跟踪文件

选择此选项以取消跟踪所选页面上的所有脚本,从 事件 窗格中移除所选节点及其下的所有项目,并关闭编辑器中的相应跟踪文件。

关闭跟踪文件

选择此选项以关闭与所选文档节点及其下项目对应的所有当前打开的跟踪文件。 文档节点及其下的项目仍保留在 事件 窗格中。

在浏览器中刷新页面

选择此选项以重新加载与所选文档节点对应的页面。 所选节点的跟踪被放弃,为跟踪同一页面创建了一个新的文档节点,旧节点变为 非活动

尝试在浏览器中关闭页面

选择此选项以关闭与所选节点对应的页面。 所选节点的跟踪被放弃,节点变为 非活动

显示应用程序依赖关系图

选择此选项以构建整个应用程序内依赖关系的图表。

  • 该图表将在单独的编辑器选项卡中打开。 图表中的节点表示您的项目文件,而边表示源文件中有一个或多个函数调用了目标文件中的函数。

  • 要检查节点或边的详细信息,请选择该节点或边,并在编辑器右上角的专用窗格中查看其 详细信息 树。 窗格显示了连接的函数组合,以及调用所在的事件和调用的次数。

事件或脚本的上下文菜单

菜单项

描述

静音事件

选择此选项以动态将事件添加到排除过滤器中。

静音脚本

选择此选项以动态将脚本添加到排除过滤器中。

移除

选择此选项以取消跟踪所选事件或脚本,从 事件 窗格中移除所选项目,但保留编辑器中打开的相应跟踪文件。

添加选项卡

选择此选项以设置时间戳标签。 时间戳标签可帮助您在特定时间段内分析代码执行情况。 例如,您可以设置两个时间戳标签,并查看其间捕获了哪些事件。 或者,您也可以定位在某个时间段内未捕获的事件,尽管您期望它们被捕获,从而检测性能问题。

显示事件依赖关系图

选择此选项以构建所选事件所涉及的依赖关系图。

  • 该图表将在单独的编辑器选项卡中打开。 图表中的节点表示您的项目文件,而边表示源文件中有一个或多个函数调用了目标文件中的函数。

  • 要检查节点或边的详细信息,请选择该节点或边,并在编辑器右上角的专用窗格中查看其 详细信息 树。 窗格显示了连接的函数组合,以及调用所在的事件和调用的次数。

配置要捕获的事件范围

默认情况下,Spy-js 会捕获所有已打开网页上的所有事件,排除 https secure 网站,除非您在运行配置中明确指定其 URL 地址。 所有捕获的事件都显示在 事件 窗格的 Spy-js 工具窗口中。 您可以通过应用用户定义的事件过滤器来抑制某些类型事件的捕获。

您可以动态定义新的自定义过滤器或将事件模式添加到现有过滤器中。

查看可用的已配置过滤器

  • 点击工具栏上的 捕获事件 按钮 捕获事件。 当前应用的过滤器用勾号标记。 默认情况下,会应用 捕获所有 预定义过滤器。

在不中止应用程序的情况下停止捕获事件

  • 点击工具栏上的 捕获事件 按钮 捕获事件 ,然后从上下文菜单中选择 静音所有。 应用程序仍在运行,但 事件 窗格显示最后捕获的事件。 这在您想要分析脚本时非常有用,因此需要将其显示在 事件 窗格中,但在捕获新事件时不将其移除。

定义新的事件过滤器

  1. 点击工具栏上的 捕获事件 按钮 捕获事件 ,然后从列表中选择 编辑捕获排除项

  2. 在打开的 Spy-js 捕获排除对话框中,点击左侧窗格中的 Add

  3. 在右侧窗格中,在 排除名称 字段中指定过滤器名称,并配置排除规则列表。

    • 要添加规则,请点击 向排除项添加条件 对话框将打开。 在 值/模式 字段中输入模式,在 条件类型 列表中指定该模式是应用于事件类型还是脚本名称。 请注意,使用了 全局模式匹配。 当您点击 确定 时,DataSpell 将带您到 Spy-js 捕获排除项对话框

    • 要编辑规则,请在列表中选择规则,点击 ,并在打开的对话框中更新规则。 要删除规则,请在列表中选择规则,然后点击

选择要应用的过滤器

  • 点击 筛选 并选中列表中所需过滤器旁边的复选框。 如果未配置任何过滤器或可用过滤器均不适合任务,请按照上述说明创建一个新过滤器。

在浏览 事件 窗格中已捕获事件的树状结构时,您可能会遇到一些您绝对不想跟踪的事件或脚本。 您可以按照上述说明创建过滤器,但在这种情况下,您需要离开窗格。 使用 DataSpell,您可以基于任何事件或脚本创建排除规则,一旦您在 事件 窗格中检测到此类事件或脚本,即可直接创建。

动态创建排除规则

  • 选择要排除的事件,然后选择 静音 <event name> 事件静音 <script name> 文件。 如果当前应用了用户定义的过滤器,新规则将被静默添加到其中。 如果当前激活了 捕获所有 ,则会打开 Spy-js 捕获排除对话框 ,您可以基于所选事件或脚本创建新过滤器,或选择现有过滤器并向其中添加新规则。

事件堆栈窗格

一旦点击 事件 窗格中的某个事件,其调用堆栈将显示在 事件堆栈 窗格中。 堆栈以函数调用的树状结构表示。 每个树节点表示被调用的函数。 节点文本包含总执行时间、脚本文件名和函数名称。 当您点击一个节点时, 快速评估 窗格会显示额外的函数调用详细信息、参数值和返回值,以及在函数执行期间发生的异常详情(如果有)。

窗格与编辑器同步,因此您可以从堆栈树中的某个项目导航到相应的 跟踪文件源文件

  • 一个 跟踪文件是脚本的只读美化版本,命名为 <script name>.js.trace 。 当您双击堆栈树中的某个项目或选择它并从选择的上下文菜单中选择 跳转到跟踪 时,相应的 跟踪文件将在编辑器中打开,并将插入点放置在所点击的函数处。 另一种方法是按下 自动滚动到跟踪 切换按钮并选择不同的堆栈节点。 在这种情况下,当您点击 事件 窗格中的某个事件或脚本时,相应的跟踪文件将打开。

    您不仅可以跳转到一个函数,还可以跳转到代码中调用该函数的位置。 要执行此操作,请选择所需的项目,然后从上下文菜单中选择 跳转到调用者

    文件内容被高亮显示,以展示所选堆栈节点的代码执行路径。

  • 当您跟踪包含 ECMAScript6CoffeeScriptTypeScript 代码的应用程序时, Spy-js 还会生成 映射的跟踪文件。 这些是 EcmaScript 6TypeScriptCoffeeScript 的跟踪文件,扩展名为 .ts.trace .coffee.trace .js.trace 。 这些文件中的代码片段被高亮显示,就像它们真的被执行过一样。

  • 您还可以导航到按原样显示的 源文件 (未美化),方法是选择 事件堆栈 窗格中的某个项目,并从选择的上下文菜单中选择 跳转到源代码。 如果被跟踪的网站与 一个 DataSpell 项目映射,DataSpell 会根据映射检测到相应的本地文件并在编辑器中打开该文件。 如果您正在跟踪一个未与 一个 DataSpell 项目映射的网站,DataSpell 会打开只读的 页面源代码 ,就像您在浏览器中选择了 查看页面源代码 一样。

    当被跟踪的网站与 一个 DataSpell 项目映射时,DataSpell 会在您尝试编辑已打开的 跟踪文件 时打开 源文件

脚本或函数的上下文菜单

项目

描述

跳转到调用者

选择此选项以导航到 跟踪文件中当前选定项被调用的片段。 当您跟踪包含 ECMAScript6CoffeeScriptTypeScript 代码的应用程序时,DataSpell 会打开 跟踪 JavaScript 文件或 映射的跟踪文件(TypeScript、CoffeeScript 或 ECMAScript6):

  • 如果选择了 如果可用,总是打开源映射跟踪 选项,则会打开相应的映射跟踪文件。

  • 如果未选择 如果可用,总是打开源映射跟踪 选项,则会打开 JavaScript 跟踪文件。

跳转到跟踪

选择此选项以导航到 跟踪文件中当前选定项的定义。

跳转到源代码

选择此选项以导航到 源文件中当前选定项的定义。

静音此文件

选择此选项以动态将所选脚本添加到排除过滤器中,请参阅 配置要捕获的事件范围

仅捕获此文件

在所有事件中搜索此函数调用

选择此选项以在整个跟踪(跨所有被跟踪的事件)中导航函数调用之间,如 高级跟踪搜索中所述。

导航到

使用此项下的选项根据调用在整个堆栈中移动,并定位未被调用的函数,即定位未执行的代码片段并分析其被跳过的原因。

以下六个操作可用:在跟踪文件中移动到下一个/上一个函数的下一个/当前/上一个调用。 完整的操作列表可从 事件堆栈 窗格的上下文菜单中获取。 在 事件堆栈 窗格的导航工具栏中,还可以移动到所选函数的下一个和上一个调用、上一个函数的上一个调用以及下一个函数的下一个调用。

spy_js_advanced_navigation_1.png

当您选择其中一个操作时,插入点会跳转到堆栈中的调用位置。 如果按下 自动滚动到跟踪 切换按钮,相应的跟踪文件会自动打开,并将插入点放置在调用位置。

窗格与编辑器之间的同步

事件堆栈 窗格与 事件 窗格及编辑器同步。

查看脚本或事件的调用堆栈

  • 点击 事件 窗格中的事件或脚本。 其调用堆栈显示在 事件堆栈 窗格中。

  • 可选:要在编辑器中自动打开相应的跟踪文件,请按工具栏上的 自动滚动到跟踪 切换按钮。

在编辑器中打开事件或脚本的跟踪文件

一个 跟踪文件是脚本的只读美化版本,命名为 <script name>.js.trace

  • 事件堆栈 窗格中,双击脚本或事件,或在其上下文菜单中选择 跳转到跟踪

  • 激活自动导航 (点击 自动滚动到跟踪 ),然后点击 事件 窗格中所需的事件或脚本。

将事件窗格直接与编辑器同步

  • 按工具栏上的 自动滚动到跟踪 切换按钮。

    之后,当点击 事件 窗格中的某个节点时,DataSpell 会在 事件堆栈 窗格中显示其调用堆栈,并在编辑器中打开相应的跟踪文件。 此外,当您滚动 事件堆栈 时,DataSpell 会自动在编辑器中打开相应的文件并高亮显示被调用的函数。

快速评估窗格

当您点击 事件堆栈 窗格中的某个节点时, 快速评估 窗格会显示额外的函数调用详细信息、参数值和返回值,以及在函数执行期间发生的异常详情(如果有)。

函数调用详细信息的上下文菜单

窗格中显示的所有项目均可使用上下文菜单。

项目

描述

Inspect

选择此选项以打开 Inspect 对话框。

复制值

选择此选项以将所选节点的值复制到剪贴板。

与剪贴板中的值比较

选择此选项以打开 文件差异查看器 ,显示所选节点的值和剪贴板中的值,以便您进行比较。

复制名称

选择此选项以将所选节点的名称复制到剪贴板。

最后修改日期: 2025年 9月 27日