跟踪运行选项卡
最后修改时间:2023 年 10 月 22 日该选项卡由一个工具栏和三个窗格组成:事件窗格、事件堆栈窗格和快速评估窗格。
事件工具栏
使用工具栏上的按钮控制要捕获的事件范围、配置其表示方式以及在捕获的事件列表中导航。
物品 | 工具提示和快捷方式 | 描述 |
---|---|---|
展开全部CtrlNumPad + | 单击此按钮可展开列表中的所有节点。 | |
全部收缩CtrlNumPad - | 单击此按钮可折叠列表中的所有节点。 | |
向上堆栈跟踪 | 单击此按钮可导航到堆栈跟踪中的上一个跟踪页面。 | |
沿着堆栈跟踪向下 | 单击此按钮可导航到堆栈跟踪中的下一个跟踪页面。 | |
单击导航 | 按此切换按钮可使“事件”窗格中的列表自动与编辑器同步。
| |
捕捉事件 | 单击此按钮可配置要捕获并显示在事件列表中的事件范围。 默认情况下,Spy-js 捕获所有打开的网页上的所有事件,不包括https 安全网站,除非您在运行配置中明确指定其 URL 地址。所有捕获的事件都显示在Spy-js工具窗口的事件窗格中。您可以通过应用用户定义的事件过滤器来禁止捕获某些类型的事件。单击 时,列表会显示所有可用的过滤器,当前应用的过滤器带有勾号。默认情况下,应用捕获全部预定义过滤器。要停止捕获事件而不停止应用程序,请选择“全部静音”。更多信息,请参阅配置事件捕获策略。 要定义自定义事件过滤器:
要激活过滤器,请选中列表中所需过滤器旁边的复选框。 | |
单击此按钮可从跟踪中删除所有或部分事件,并在编辑器中关闭相应的跟踪文件。在显示的列表中选择以下选项之一:
|
事件窗格
该窗格显示捕获事件的树。顶级节点表示文档,这些文档是涉及跟踪的网页。当您将鼠标悬停在文档上时,PyCharm 会显示一个工具提示,其中包含文档的 URL 地址、打开该文档的浏览器以及运行该浏览器的操作系统。文档节点还提供一个图标,指示打开它的浏览器。
在每个文档节点下,列出了在页面上检测到的事件以及从该页面启动的脚本。相同类型的事件被分组到视觉容器中。容器的标题显示其中分组的事件的名称、容器内所有事件的平均执行时间以及容器内的事件数。您可以展开每个节点并检查其中的各个事件。
脚本文件名具有不同的颜色指示符,有助于在使用“事件堆栈”窗格时区分它们。将鼠标悬停在脚本文件名上,您可以看到完整的脚本 URL。
单击事件后,其调用堆栈将显示在“事件堆栈”窗格中。堆栈由函数调用树表示。
文档节点的上下文菜单
菜单项 | 描述 |
---|---|
消除 | 选择此选项可取消跟踪所选页面上的所有脚本,并从“事件”窗格中删除所选节点及其下的所有项目。所有当前打开的跟踪文件在编辑器中保持打开状态。 |
删除所有子项 | 选择此选项可删除所选页面下的项目,但继续跟踪它,以便仍然接收来自该页面的新事件。文档节点本身保留在“事件”窗格中,并且所有当前打开的跟踪文件在编辑器中仍保持打开状态。 |
删除并关闭跟踪文件 | 选择此选项可取消跟踪所选页面上的所有脚本,从“事件”窗格中删除所选节点及其下的所有项目,并关闭编辑器中相应的跟踪文件。 |
关闭跟踪文件 | 选择此选项可关闭与所选文档节点及其下的项目相对应的所有当前打开的跟踪文件。文档节点及其下的项目保留在“事件”窗格中。 |
在浏览器中刷新页面 | 选择此选项可重新加载与所选文档节点对应的页面。放弃对所选节点的跟踪,创建用于跟踪同一页面的新文档节点,并且旧节点变为非活动状态。 |
尝试关闭浏览器中的页面 | 选择此选项可关闭与所选节点对应的页面。放弃对所选节点的跟踪,并且该节点变为非活动状态。 |
显示应用程序依赖关系图 | 选择此选项可构建包含整个应用程序内的依赖关系的图表。
|
事件或脚本的上下文菜单
菜单项 | 描述 |
---|---|
静音事件 | 选择此选项可将事件动态添加到排除过滤器。 |
静音脚本 | 选择此选项可以将脚本动态添加到排除过滤器。 |
消除 | 选择此选项可取消跟踪选定的事件或脚本,从“事件”窗格中删除选定的项目,但使相应的跟踪文件在编辑器中保持打开状态。 |
添加标签 | 选择此选项可设置时间戳标签。时间戳标签可帮助您分析特定时间段内的代码执行情况。例如,您可以设置两个时间戳标签并查看它们之间捕获了哪些事件。或者相反,您可以找到在特定时间段内虽然您期望捕获但未捕获的事件,从而检测性能问题。 |
显示事件依赖关系图 | 选择此选项可构建包含所选事件所涉及的依赖关系的图表。
|
配置要捕获的事件范围
默认情况下,Spy-js 捕获所有打开的网页上的所有事件,不包括https 安全网站,除非您在运行配置中明确指定其 URL 地址。所有捕获的事件都显示在Spy-js工具窗口的事件窗格中。您可以通过应用用户定义的事件过滤器来禁止捕获某些类型的事件。
您可以定义新的自定义过滤器或动态地将事件模式添加到现有过滤器。
查看可用的配置过滤器
单击工具栏上的捕获事件按钮。当前应用的过滤器带有勾号。默认情况下,应用捕获全部预定义过滤器。
在不停止应用程序的情况下停止捕获事件
单击工具栏上的“捕获事件”按钮,然后从上下文菜单中选择“全部静音” 。应用程序仍在运行,但“事件”窗格显示最后捕获的事件。如果您想要分析脚本并因此需要将其显示在“事件”窗格中,但在捕获新事件时不将其删除,这会很有帮助。
定义新的事件过滤器
单击工具栏上的“捕获事件”按钮,然后从列表中选择“编辑捕获排除” 。
在打开的Spy-js 捕获排除对话框中,单击左侧窗格中的添加。
在右侧窗格中,在排除名称字段中指定过滤器名称并配置排除规则列表。
要添加规则,请单击,将打开“添加排除条件”对话框。在值/模式字段中输入模式,在条件类型列表中指定该模式是否应应用于事件类型或脚本名称。请注意,使用了全局模式匹配。单击“确定”后,PyCharm 会将您带到“Spy-js 捕获排除”对话框。
要编辑规则,请在列表中选择它,单击,然后在打开的对话框中更新规则。要删除规则,请在列表中选择它并单击。
选择要应用的过滤器
单击并选中列表中所需过滤器旁边的复选框。如果未配置过滤器或没有可用的过滤器适合该任务,请如上所述创建一个新过滤器。
在“事件”窗格中浏览已捕获事件的树时,您可能会遇到一些您绝对不想跟踪的事件或脚本。您可以如上所述创建过滤器,但在这种情况下您将必须离开该窗格。使用 PyCharm,一旦检测到任何事件或脚本,您就可以直接从“事件”窗格创建基于此类事件或脚本的排除规则。
动态创建排除规则
选择要排除的事件,然后选择“静音 <事件名称> 事件”或“静音 <脚本名称> 文件”。如果当前应用了用户定义的过滤器,新规则将自动添加到其中。如果“捕获全部”当前处于活动状态,则会打开“Spy-js 捕获排除”对话框,您可以在其中根据所选事件或脚本创建新过滤器,或者选择现有过滤器并向其添加新规则。
事件堆栈窗格
单击“事件”窗格中的事件后,其调用堆栈将显示在“事件堆栈”窗格中。堆栈由函数调用树表示。每个树节点代表调用的函数。节点文本包含总执行时间、脚本文件名和函数名称。当您单击某个节点时,“快速评估”窗格会显示其他函数调用详细信息、参数值和返回值以及函数执行期间发生的异常详细信息(如果有)。
该窗格与编辑器同步,因此您可以从堆栈树中的项目导航到相应的跟踪文件或源文件。
跟踪文件是脚本的写保护美化版本,名为<script name>.js.trace。当您双击堆栈树中的某个项目或选择它并从所选内容的上下文菜单中选择“跳转到跟踪”时,相应的跟踪文件将在编辑器中打开,并将插入符号放置在单击的函数处。另一种方法是按“自动滚动到跟踪”切换按钮并选择各种堆栈节点。在这种情况下,当您单击“事件”窗格中的事件或脚本时,跟踪文件将打开。
您不仅可以跳转到函数,还可以跳转到代码中调用该函数的位置。为此,请选择所需的项目,然后从上下文菜单中选择“跳转到呼叫者” 。
文件的内容突出显示以显示所选堆栈节点的代码执行路径。
当您使用ECMASript6、CoffeeScript和TypeScript代码跟踪应用程序时, Spy-js还会生成映射的跟踪文件。这些是EcmaScript 6、TypeScript或CoffeeScript跟踪文件,扩展名为.ts.trace、.coffee.trace或.js.trace。这些文件中的代码片段会突出显示,就像它们确实被执行一样。
您还可以导航到按原样显示的源文件,无需美化,方法是在“事件堆栈”窗格中选择一个项目,然后从所选内容的上下文菜单中选择“跳转到源” 。如果跟踪的站点与 PyCharm 项目进行了映射,PyCharm 会根据映射检测相应的本地文件,并在编辑器中打开该文件。如果您正在跟踪未映射到 PyCharm 项目的站点,PyCharm 将打开只读页面源,就像您在浏览器中选择“查看页面源”一样。
当跟踪站点与 PyCharm 项目映射时,PyCharm在任何尝试编辑打开的跟踪文件时都会打开源文件。
脚本或函数的上下文菜单
物品 | 描述 |
---|---|
跳转到来电者 | 选择此选项可导航到跟踪文件中调用当前所选项目的片段。当您使用ECMASript6、CoffeeScript和TypeScript代码跟踪应用程序时,PyCharm 将打开跟踪JavaScript 文件或映射的跟踪文件(TypeScript、CoffeeScript 或 ECMAScript6):
|
跳转到跟踪 | 选择此选项可导航到跟踪文件中当前所选项目的定义。 |
跳转至源代码 | 选择此选项可导航至源文件中当前所选项目的定义。 |
将此文件静音 | 选择此选项可将选定的脚本动态添加到排除过滤器,请参阅配置要捕获的事件范围。 |
仅捕获此文件 | |
在所有事件中搜索此函数调用 | 选择此选项可在整个跟踪(跨所有跟踪事件)内的函数调用之间导航,如高级跟踪搜索中所述。 |
导航 | 使用此项下的选项可以根据调用遍历整个堆栈,定位到没有被调用的函数,即定位到没有执行过的代码片段并分析其被跳过的原因。 可以执行以下六个操作: 移至跟踪文件中下一个/当前/上一个函数的下一个/上一个调用。事件堆栈窗格中的上下文菜单提供了完整的操作列表。还可以从“事件堆栈”窗格的导航工具栏移动到所选函数的下一个和上一个调用、上一个函数的上一个调用以及下一个函数的下一个调用。 当您选择这些操作之一时,插入符号会跳转到堆栈中的调用。如果按下自动滚动到跟踪切换按钮,相应的跟踪文件将自动打开,并在调用处放置插入符号。 |
窗格和编辑器之间的同步
事件堆栈窗格与事件窗格和编辑器同步。
查看脚本或事件的调用堆栈
单击“事件”窗格中的事件或脚本。其调用堆栈显示在“事件堆栈”窗格中。
或者:要在编辑器中自动打开相应的跟踪文件,请按工具栏上的“自动滚动到跟踪”切换按钮。
在编辑器中打开事件或脚本的跟踪文件
跟踪文件是脚本的写保护美化版本,名为<script name>.js.trace。
在“事件堆栈”窗格中,单击脚本或事件两次,或在其上下文菜单上选择“跳转到跟踪” 。
激活自动导航(单击“自动滚动到跟踪”),然后在“事件”窗格中单击所需的事件或脚本。
直接将事件窗格与编辑器同步
按工具栏上的“自动滚动到跟踪”切换按钮。
之后,单击“事件”窗格中的节点时,PyCharm 在“事件堆栈”窗格中显示其调用堆栈,然后在编辑器中打开相应的跟踪文件。此外,当您滚动事件堆栈时,PyCharm 会自动在编辑器中打开相应的文件并突出显示所调用的函数。
快速评估面板
当您单击“事件堆栈”窗格中的某个节点时,“快速评估”窗格会显示其他函数调用详细信息、参数值和返回值以及发生的异常详细信息(如果在函数执行过程中出现异常)。
右键菜单关闭函数调用详情
窗格中显示的所有项目都可以使用上下文菜单。
物品 | 描述 |
---|---|
检查 | 选择此选项可打开“检查”对话框。 |
复制值 | 选择此选项可将所选节点的值复制到剪贴板。 |
与剪贴板比较值 | 选择此选项可打开文件的差异查看器,其中显示所选节点的值和剪贴板中的值,以便您可以对它们进行比较。 |
复制姓名 | 选择此选项可将所选节点的名称复制到剪贴板。 |
感谢您的反馈意见!