运行跟踪选项卡
该选项卡包含一个工具栏和三个面板： 事件窗格、 事件堆栈窗格 和 快速求值窗格。
事件工具栏
使用工具栏上的按钮控制要捕获的事件范围、配置显示方式并在捕获事件列表中导航。
项 | 工具提示与快捷键 | 说明 |
|---|---|---|
| 全部展开 Ctrl+NumPad + | 单击此按钮可展开列表中的所有节点。 |
| 全部折叠 Ctrl+NumPad - | 单击此按钮可折叠列表中的所有节点。 |
| 堆栈跟踪上移 | 单击此按钮可跳转到堆栈跟踪中上一个跟踪页面。 |
| 堆栈跟踪下移 | 单击此按钮可跳转到堆栈跟踪中下一个跟踪页面。 |
| 单击导航 | 按下此切换按钮后， 事件 面板中的列表会自动与 编辑器 同步。
|
| 捕获事件 | 单击此按钮以配置要捕获并显示在 事件 列表中的事件范围。 默认情况下，Spy-js 会捕获所有已打开 Web 页面的事件，但不包括 https 安全 网站，除非您在运行配置中显式指定其 URL 地址。 所有捕获的事件将显示在 事件 面板中的 Spy-js 工具窗口内。 您可以通过应用用户定义的事件过滤器来抑制某些类型的事件捕获。 单击 要定义自定义事件过滤器：
要激活过滤器，请在列表中勾选所需过滤器旁的复选框。 |
| 点击此按钮可从追踪中移除全部或部分事件，并关闭编辑器中相应的跟踪文件。 在显示的列表中选择以下选项之一：
| |
并通过标准 
，表示下次点击将强制终止应用程序，例如在 Unix 上发送 事件面板
该面板显示捕获事件的树状结构。 顶层节点表示参与跟踪的网页 documents。 当您将鼠标悬停在 document 上时，WebStorm 会显示一个工具提示，其中包含 document 的 URL 地址、打开该文档的浏览器以及该浏览器运行的操作系统。 document 节点还带有一个图标，指示其打开所在的浏览器。
在每个 document 节点下，会列出页面上检测到的事件以及从中启动的脚本。 相同类型的事件会被分组到可视容器中。 容器的标题显示分组事件的名称、容器内所有事件的平均执行时间以及容器内的事件数量。 您可以展开每个节点并检查其中的单个事件。
在使用 事件堆栈 面板时，脚本文件名称具有不同的颜色指示器，便于区分它们。 将鼠标悬停在脚本文件名上，您可以查看完整的脚本 URL。
单击某个事件后，其调用堆栈会显示在 事件堆栈 面板中。 堆栈以函数调用树的形式呈现。
文档节点的上下文菜单
菜单项 | 描述 |
|---|---|
移除 | 选择此选项以取消跟踪所选页面上的所有脚本，并从 事件 面板中移除所选节点及其所有子项。 所有当前打开的跟踪文件将继续在编辑器中保持打开状态。 |
移除所有子项 | 选择此选项以删除所选页面下的项，但继续对该页面进行跟踪，从而继续接收来自该页面的新事件。 事件 面板中仍保留 document 节点本身，所有当前打开的跟踪文件也将继续在编辑器中保持打开状态。 |
移除并关闭跟踪文件 | 选择此选项以取消跟踪所选页面上的所有脚本，从 事件 面板中移除所选节点及其所有子项，并关闭编辑器中对应的跟踪文件。 |
关闭跟踪文件 | 选择此选项以关闭与所选 document 节点及其子项对应的所有当前已打开的跟踪文件。 事件 面板中依然保留 document 节点及其子项。 |
在浏览器中刷新页面 | 选择此选项以重新加载与所选 document 节点对应的页面。 所选节点的跟踪被放弃，为相同页面创建新的 document 节点用于跟踪，旧节点变为 非活动 状态。 |
尝试在浏览器中关闭页面 | 选择此选项以关闭与所选节点对应的页面。 所选节点的跟踪被放弃，节点变为 非活动 状态。 |
显示应用程序依赖关系图 | 选择此选项以构建整个应用程序内部依赖关系的图表。
|
事件或脚本的上下文菜单
菜单项 | 描述 |
|---|---|
静音事件 | 选择此选项可将事件立即添加到排除过滤器中。 |
静音脚本 | 选择此选项可立即将脚本添加到排除筛选器中。 |
移除 | 选择此选项以取消对所选事件或脚本的跟踪，将其从 事件 窗格中移除，但保留对应的跟踪文件在编辑器中打开。 |
添加标签 | 选择此选项以设置时间戳标签。 时间戳标签帮助您在特定时间范围内分析代码执行情况。 例如，您可以设置两个时间戳标签，并查看这两者之间捕获了哪些事件。 或者，您也可以找出在某一时间段内未捕获但您预期会出现的事件，从而发现性能问题。 |
显示事件依赖图 | 选择此选项以构建所选事件涉及的依赖关系图。
|
配置要捕获的事件范围
默认情况下，Spy-js 会捕获所有打开网页的所有事件，不包括 https secure 网站，除非您在运行配置中明确指定其 URL 地址。 所有捕获的事件都会显示在 事件 窗格的 Spy-js 工具窗口中。 您可以通过应用用户自定义事件筛选器来抑制某些类型事件的捕获。
您可以动态定义新的自定义筛选器，或向现有筛选器添加事件模式。
查看已配置的可用过滤器
单击工具栏上的 捕获事件 按钮
。 当前应用的筛选器在列表中会显示为已打勾。 默认会应用 全部捕获 预定义筛选器。
在不停止应用程序的情况下停止捕获事件
单击工具栏上的 捕获事件 按钮
，然后从上下文菜单中选择 全部静音。 应用程序仍在运行，但 事件 窗格中会显示最后一个捕获的事件。 如果您希望分析某个脚本并希望其显示在 事件 窗格中但不被新捕获的事件所覆盖，则此功能非常有用。
定义新的事件过滤器
单击工具栏上的 捕获事件 按钮
，然后从列表中选择 编辑捕获排除项。在打开的 Spy-js Capture Exclusions Dialog 中，单击左侧窗格的 添加
。在右侧窗格中，在 排除名称 字段中指定筛选器名称，并配置排除规则列表。
要添加一条规则，请单击
，将打开 向排除项添加条件 对话框。 在 值／模式 字段中输入模式，在 条件类型 列表中指定该模式应应用于事件类型还是脚本名称。 请注意使用了 glob pattern matching。 单击 确定 后，WebStorm 会跳转至 Spy-js 捕获排除对话框。要编辑一条规则，请在列表中选择它，单击
，并在打开的对话框中更新该规则。 要移除一条规则，请在列表中选择它并点击 
。
选择要应用的过滤器
单击
，然后勾选列表中所需筛选器旁的复选框。 如果未配置任何筛选器，或没有可用的筛选器满足需求，请按上述说明创建新筛选器。
在 事件 窗格中浏览已捕获事件树时，您可能会遇到一些您不希望跟踪的事件或脚本。 您可以按上述方式创建筛选器，但此操作会使您离开当前窗格。 使用 WebStorm，您可以在发现某个事件或脚本时，直接在 事件 窗格中基于该事件或脚本创建排除规则。
动态创建排除规则
选择要排除的事件，然后选择 静音 <event name> 事件 或 静音 <script name> 文件。 如果当前应用了用户定义的筛选器，则新规则将自动添加到该筛选器中。 如果当前启用了 全部捕获 ，将打开 Spy-js 捕获排除项对话框 ，您可以在其中根据所选事件或脚本创建新筛选器，或选择现有筛选器并向其添加新规则。
事件堆栈面板
单击 事件 面板中的某个事件后，其调用堆栈会显示在 事件堆栈 面板中。 堆栈以函数调用树的形式表示。 每个树节点表示被调用的函数。 节点文本包含函数的总执行时间、脚本文件名和函数名称。 单击某个节点时， 快速求值 面板会显示额外的函数调用详情、参数值和返回值，以及执行期间可能发生的异常信息。
该面板与编辑器同步，因此您可以从堆栈树中的某项导航到相应的 跟踪文件 或 源文件。
跟踪文件 是脚本的只读美化版本，命名为 <script name>.js.trace 。 在堆栈树中双击某项或选中它并在上下文菜单中选择 跳转至 Trace ，相应的 跟踪文件 将在编辑器中打开，光标定位于所点击的函数上。 另一种方法是按 自动滚动到 Trace 切换按钮，并选择不同的堆栈节点。 在这种情况下，当您在 事件 面板中点击某个事件或脚本时，跟踪文件将打开。
您不仅可以跳转到函数，也可以跳转到调用该函数的代码位置。 为此，请选中需要的项，然后从上下文菜单中选择 跳转至调用方。
文件内容将被高亮显示，以呈现所选堆栈节点的代码执行路径。
在跟踪包含 ECMASript6、 CoffeeScript 和 TypeScript 代码的应用程序时， Spy-js 还会生成 映射跟踪文件。 这些是带有扩展名 .ts.trace 、 .coffee.trace 或 .js.trace 的 EcmaScript 6、 TypeScript 或 CoffeeScript 跟踪文件。 这些文件中的代码片段将被高亮显示，如同它们确实被执行过一样。
您还可以直接导航到不经过美化处理的 源文件 ，只需在 事件堆栈 面板中选中一项，并从上下文菜单中选择 跳转至源代码。 如果已将被跟踪的网站映射到 一个 WebStorm 项目，WebStorm 会根据映射关系检测到对应本地文件，并在编辑器中打开该文件。 如果您正在跟踪未映射到 一个 WebStorm 项目的站点，WebStorm 将打开只读的 页面源代码 ，就像在浏览器中选择了 查看页面源代码 一样。
当已将被跟踪的网站映射到 一个 WebStorm 项目时，WebStorm 会在尝试编辑已打开的 跟踪文件 时打开相应的 源文件。
脚本或函数的上下文菜单
项 | 说明 |
|---|---|
跳转到调用方 | 选择此选项以导航至 跟踪文件 中当前所选项的调用片段。 在跟踪包含 ECMASript6、 CoffeeScript 和 TypeScript 代码的应用程序时，WebStorm 会打开 跟踪 JavaScript 文件或 映射跟踪 文件（TypeScript、CoffeeScript 或 ECMAScript6）：
|
跳转到跟踪 | 选择此选项可导航至 跟踪文件 中当前所选项的定义。 |
跳转到源代码 | 选择此选项可导航至 源文件 中当前所选项的定义。 |
忽略此文件 | 选择此选项以便将所选脚本动态添加到排除筛选器中，详见 配置要捕获的事件范围。 |
仅捕获此文件 | |
在所有事件中搜索此函数调用 | 选择此选项可在整个跟踪范围内（所有被跟踪事件）导航函数调用，如 高级跟踪搜索 中所述。 |
跳转到 | 使用此项下的选项根据调用遍历整个堆栈，并定位未被调用的函数，即未被执行的代码片段，并分析其被跳过的原因。 可执行以下六项操作：在跟踪文件中跳转到下一个／上一个调用的下一个／当前／上一个函数。 完整的操作列表可从 事件堆栈 窗格的上下文菜单中获取。 跳转到所选函数的下一个和上一个调用，上一个函数的上一个调用，以及下一个函数的下一个调用，也可通过 事件堆栈 窗格的导航工具栏执行。  选择这些操作之一后，插入符将跳转至堆栈中的相应调用位置。 如果按下 自动滚动到 Trace 切换按钮，则会自动打开相应的跟踪文件，并将插入符定位在该调用处。 |
窗格与编辑器之间的同步
事件堆栈 窗格与 事件 窗格以及编辑器保持同步。
查看脚本或事件的调用堆栈
在 事件 面板中单击事件或脚本。 其调用堆栈将在 事件堆栈 窗格中显示。
可选：若要在编辑器中自动打开相应的跟踪文件，请在工具栏中按下 自动滚动到 Trace 切换按钮。
在编辑器中打开事件或脚本的跟踪文件
trace file 是脚本的只读格式化版本，文件名为 <script name>.js.trace 。
在 事件堆栈 窗格中双击脚本或事件，或在其上下文菜单中选择 跳转至 Trace。
启用自动导航 （单击 自动滚动到 Trace ），然后在 事件 窗格中单击所需事件或脚本。
将事件面板与编辑器直接同步
在工具栏中按下 自动滚动到 Trace 切换按钮。
此后，在 事件 窗格中单击某节点时，WebStorm 会在 事件堆栈 窗格中显示其调用堆栈，并在编辑器中打开相应的跟踪文件。 此外，当浏览 事件堆栈 时，WebStorm 会自动在编辑器中打开相应文件，并高亮显示被调用的函数。
快速计算面板
在 事件堆栈 窗格中单击某个节点时， 快速求值 窗格将显示更多函数调用信息、参数值与返回值，以及函数执行期间发生的异常信息（如果有）。
函数调用详情的上下文菜单
上下文菜单在窗格中显示的所有项上均可使用。
项 | 描述 |
|---|---|
检查 | 选择此选项以打开 检查 对话框。 |
复制值 | 选择此选项以将所选节点的值复制到剪贴板。 |
将值与剪贴板比较 | 选择此选项以打开 文件差异查看器 ，其中显示所选节点的值与剪贴板中的值，方便进行比较。 |
复制名称 | 选择此选项以将所选节点的名称复制到剪贴板。 |