使用 Spy-js 分析 JavaScript
Spy-js 是一个用于调试、跟踪和分析运行在不同平台/浏览器/设备上的 JavaScript 以及服务器端 Node.js 应用程序的工具。 Spy-js 识别源映射，因此您可以使用 CoffeeScript 和 TypeScript 代码跟踪应用程序。 有关更多信息，请参阅 调试 CoffeeScript和 File Watcher。
使用 PyCharm，您可以在特定于 SpyJS 的调试会话期间跟踪您的应用程序，并在专用用户界面中探索结果。
为了跟踪脚本，Spy-js 会动态修改脚本，通过插入检测指令将脚本执行时调用的函数报告回 Spy-js 用户界面。
Spy-js 使用不同的机制来跟踪 Web 应用程序和 Node.js 应用程序。
为了修改网站脚本，Spy-js 必须充当一个代理服务器，位于您的浏览器和您正在跟踪的网站之间。 当您在浏览器中打开一个被跟踪的网站时，Spy-js 接收脚本请求，从您的网站请求脚本，接收脚本，进行必要的修改，然后将其发送回您的浏览器，在浏览器中执行脚本，并将运行时信息发送到 Spy-js 用户界面。
对于 Node.js 应用程序，如果应用程序已经在运行，Spy-js 无法介入 Node.js 服务器和脚本之间。 因此，为了跟踪 Node.js 应用程序，Spy-js 启动 Node.js 服务器和应用程序本身。 这使得 Spy-js 能够拦截和修改脚本请求和脚本，从而跟踪过程与跟踪网站脚本时相同。
开始之前
请确保您的计算机上安装了 Node.js。
在 设置 | 插件 页面的 Marketplace 选项卡上，按照 从 JetBrains Marketplace 安装插件的说明安装并启用 Spy-js插件。
Spy-js 用户界面
所有与跟踪相关的活动，例如查看捕获的事件、检查其调用堆栈、导航到源代码等，都是在专用的 Spy-js 工具窗口中执行的，特别是在其 跟踪运行选项卡中。 该选项卡由一个工具栏和三个窗格组成：
事件面板
窗格显示捕获事件的树状结构。 顶级节点表示参与跟踪的 文档 ，即网页。 当您将鼠标悬停在 文档上时，PyCharm 会显示一个工具提示，其中包含 文档的 URL 地址、打开它的浏览器以及运行该浏览器的操作系统。 文档节点还配有一个图标，指示其打开的浏览器。
在每个 文档节点下，列出了页面上检测到的事件和从中启动的脚本。 相同类型的事件被分组到可视化容器中。 容器的标题显示了其中分组事件的名称、容器内所有事件的平均执行时间以及容器内的事件数量。 您可以展开每个节点并检查其中的单个事件。
脚本文件名具有不同的颜色指示器，有助于在 事件堆栈 窗格中工作时区分它们。 将鼠标悬停在脚本文件名上，您可以看到完整的脚本 URL。
一旦点击某个事件，其调用堆栈会显示在 事件堆栈 窗格中。 堆栈以函数调用树的形式表示。
事件堆栈面板
一旦点击 事件 窗格中的某个事件，其调用堆栈会显示在 事件堆栈 窗格中。 堆栈以函数调用树的形式表示。 每个树节点表示被调用的函数。 节点文本包含总执行时间、脚本文件名和函数名。 当您点击某个节点时， 快速评估 窗格会显示额外的函数调用详细信息、参数值和返回值，以及函数执行期间发生的异常详情（如果有）。
窗格与编辑器同步，因此您可以从堆栈树中的项目导航到相应的 跟踪文件或 源文件。
跟踪文件是脚本的只读美化版本，命名为 <script name>.js.trace 。 当您双击堆栈树中的某个项目或选择它并从选择的上下文菜单中选择 跳转到跟踪 时，相应的 跟踪文件 会在编辑器中打开，插入符号定位在点击的函数处。 另一种方法是按下 自动滚动到跟踪 切换按钮并选择各种堆栈节点。 在这种情况下，当您点击 事件 窗格中的事件或脚本时，跟踪文件会打开。
您不仅可以跳转到一个函数，还可以跳转到代码中调用该函数的位置。 为此，请选择所需的项目并从上下文菜单中选择 跳转到调用方。
文件的内容会被高亮显示，以展示所选堆栈节点的代码执行路径。
当您使用 ECMAScript6、 CoffeeScript和 TypeScript代码跟踪应用程序时， Spy-js还会生成 映射跟踪文件。 这些是 ECMAScript 6、 TypeScript或 CoffeeScript的跟踪文件，扩展名为 .ts.trace 、 .coffee.trace 或 .js.trace 。 这些文件中的代码片段会被高亮显示，就像它们真的被执行过一样。
您还可以导航到 源文件 ，显示为原始状态，未进行美化，只需在 事件堆栈 窗格中选择一个项目并从上下文菜单中选择 跳转到源。 如果被跟踪的网站与 一个 PyCharm 项目映射，PyCharm 会根据映射检测到相应的本地文件并在编辑器中打开该文件。 如果您正在跟踪一个未与 一个 PyCharm 项目映射的网站，PyCharm 会打开只读的 页面源代码 ，就像您在浏览器中选择 查看页面源代码 一样。
当被跟踪的网站与 一个 PyCharm 项目映射时，PyCharm 会在尝试编辑已打开的 跟踪文件时打开 源文件。
快速评估面板
当您点击 事件堆栈 窗格中的节点时， 快速评估 窗格会显示额外的函数调用详细信息、参数值和返回值，以及函数执行期间发生的异常详情（如果有）。
启动 Spy-js 跟踪会话
在 PyCharm 中，Spy-js 是通过运行/调试配置启动的，类型为 Spy-js用于跟踪 Web 应用程序，或类型为 Spy-js for Node.js用于跟踪 Node.js 应用程序。
创建 Spy-js 调试配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，单击工具栏上的 添加 按钮（
），然后从列表中选择 Spy-js。将打开 运行/调试配置：Spy-js对话框。
指定要使用的 Node.js 解释器。
跟踪服务器端口 会自动填写。 为避免端口冲突，建议您接受建议的值并保持选中 自动配置系统代理 复选框。 结果是，指定的端口号会自动设置为系统代理服务器的端口。
或者，手动配置您的系统代理端口。
转到 并启用 使用代理服务器。 在 端口 字段中，输入 跟踪服务器端口 号。
从 Microsoft 官方网站 了解更多信息。
转到 ，点击 高级 ，切换到 代理 选项卡，清除 自动代理配置 ，并输入您的代理配置文件的 URL 地址。 确保 URL 中的端口与运行/调试配置中的 跟踪服务器端口 相同。
从 Apple 官方网站 了解更多信息。
从 使用 列表中选择指定跟踪会话配置方式的方式。
要让 Spy-js 应用其内部预定义配置，请选择 默认配置。
要应用您自定义手动创建的配置，请选择 配置文件 选项，然后在下面的 配置 字段中指定您的自定义配置文件的位置。
配置文件 是一个带有扩展名 .js 或 .conf.js 的 JavaScript 文件，其中包含符合 Spy-js 配置要求 的有效 JavaScript 代码。 如果 PyCharm 检测到项目中带有扩展名 .conf.js 的文件，这些文件将显示在列表中。
手动输入配置文件的路径，或点击 浏览
并在打开的对话框中选择位置。 一旦指定，配置文件将添加到列表中，以便下次可以从列表中获取，而无需重新指定路径。
开始跟踪 Web 应用程序
在工具栏的 选择运行/调试配置 列表中选择 新创建的配置 ，然后点击
。 Spy-js 工具窗口会打开，显示一个空的 跟踪运行 选项卡和一个 跟踪代理服务器 选项卡，告知您代理服务器的状态。切换到浏览器并刷新页面以开始调试。 Spy-js 开始捕获此页面上的事件，并在 Spy-js 工具窗口的 事件 窗格中显示它们。
创建用于 Node.js 的 Spy-js 调试配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，单击工具栏上的 添加 按钮（
），然后从列表中选择 Spy-js for Node.js。将打开 运行/调试配置：用于 Node.js 的 Spy-js对话框。
指定要使用的 Node.js 解释器。
如果您选择 项目 别名，PyCharm 将自动使用 节点解释器 字段中 Node.js 页面的项目默认解释器。 在大多数情况下，PyCharm 会检测到项目的默认解释器并自动填写该字段。
您也可以选择另一个已配置的本地或远程解释器，或点击
并配置一个新的。指定用于启动应用程序的 JavaScript 文件。
如果您要跟踪 CoffeeScript，请指定生成的 JavaScript 文件的路径。 该文件可以通过外部生成或使用 File Watchers 编译生成。 如需了解更多信息，请参阅 Debugging CoffeeScript。
跟踪服务器端口 会自动填写。 为避免端口冲突，建议您接受建议的值并保持选中 自动配置系统代理 复选框。 结果是，指定的端口号会自动设置为系统代理服务器的端口。
或者，手动配置您的系统代理端口。
转到 并启用 使用代理服务器。 在 端口 字段中，输入 跟踪服务器端口 号。
从 Microsoft 官方网站 了解更多信息。
转到 ，点击 高级 ，切换到 代理 选项卡，清除 自动代理配置 ，并输入您的代理配置文件的 URL 地址。 确保 URL 中的端口与运行/调试配置中的 跟踪服务器端口 相同。
从 Apple 官方网站 了解更多信息。
指定包含跟踪会话配置设置的配置文件。
配置文件 是一个带有扩展名 .js 或 .conf.js 的 JavaScript 文件，其中包含符合 Spy-js 配置要求 的有效 JavaScript 代码。 如果 PyCharm 检测到项目中带有扩展名 .conf.js 的文件，这些文件将显示在列表中。
手动输入配置文件的路径，或点击 浏览
并在打开的对话框中选择位置。 一旦指定，配置文件将添加到列表中，以便下次可以从列表中获取，而无需重新指定路径。可选：
输入 节点参数 以自定义 Node.js 的启动方式。
例如，要启用对 ECMAScript 6 脚本的跟踪，请将
--harmony指定为 Node 参数。 请注意，Node.js 必须是 0.11.13 或更高版本。选择应用程序的 工作目录。
默认情况下，该字段显示 项目根文件夹。
指定通过 process.argv数组传递给应用程序启动时的 Node.js 特定参数。
如果适用，指定 Node.js 可执行文件的 环境变量。 欲了解更多信息，请参阅 运行/调试配置：Spy-js for Node.js。
开始跟踪 Node.js 应用程序
在工具栏的 选择运行/调试配置 列表中选择 新创建的配置 ，然后点击
。 Spy-js 工具窗口会打开，在 跟踪运行 选项卡中显示捕获的事件。
保存和加载跟踪会话
Spy-js 将跟踪会话的调用和属性存储在 .json 文件中，这些文件可以压缩成 压缩包 归档文件。 您可以随时提取它们以将跟踪会话图像加载到 Spy-js 中。 请注意，加载的图像不会恢复会话，因为实际上没有执行任何脚本。 您只能分析先前执行代码的流程和属性。
保存跟踪会话的图像
点击
工具栏上的 事件 ，然后从列表中选择 保存跟踪。 PyCharm 会将所有受影响的 .json 文件压缩成 压缩包 归档文件，并打开保存归档文件的文件夹。
加载先前跟踪会话的图像
要激活 Spy-js，请启动与图像中保存的会话类型相同的跟踪会话，分别是 Spy-js 或用于 Node.js 的 Spy-js，参阅上文 启动 Spy-js 跟踪会话。
点击
工具栏上的按钮 事件 ，然后从列表中选择 加载跟踪。在打开的对话框中，选择包含所需会话图像的 压缩包 归档文件的位置。 Spy-js 停止运行并在名为 已加载<已加载的会话> 的新选项卡中显示加载的跟踪。
配置事件捕获策略
默认情况下，Spy-js 捕获所有打开的网页上的所有事件，排除 https 安全网站，除非您在运行配置中明确指定了它们的 URL 地址。 所有捕获的事件都显示在 Spy-js 工具窗口的 事件 窗格中。 您可以通过应用用户定义的事件过滤器来抑制某些类型的事件捕获。
您可以动态定义新的自定义过滤器或将事件模式添加到现有过滤器中。
查看可用的已配置过滤器
点击
工具栏。 当前应用的过滤器会用勾号标记。 默认情况下，应用 全部捕获 预定义过滤器。
在不停止应用程序的情况下停止捕获事件
点击工具栏上的 捕获事件 按钮
，然后从上下文菜单中选择 全部禁止。 应用程序仍在运行，但 事件 窗格显示最后捕获的事件。 如果您想分析脚本并需要它显示在 事件 窗格中而不因捕获新事件而被移除，这会很有帮助。
定义新的事件过滤器
点击工具栏上的 捕获事件 按钮
，然后从列表中选择 编辑捕获排除。在打开的 Spy-js 捕获排除对话框 中，点击左侧窗格中的 添加
。在右侧窗格中，在 排除名称 字段中指定过滤器名称，并配置排除规则列表。
要添加规则，请点击
， 将条件添加到排除中 对话框将打开。 在 值/模式 字段中输入模式，在 条件类型 列表中指定模式是应用于事件类型还是脚本名称。 请注意，使用的是 全局模式匹配。 当您点击 OK 时，PyCharm 会将您带到 Spy-js 捕获排除对话框。要编辑规则，请在列表中选择它，点击
，并在打开的对话框中更新规则。 要删除规则，在列表中选择规则并点击 
。
选择要应用的过滤器
点击
并选中列表中所需过滤器旁边的复选框。 如果未配置任何过滤器或可用过滤器均不适合任务，请按照上述描述创建一个新过滤器。
在 事件 窗格中浏览已捕获事件的树时，您可能会遇到一些您绝对不想跟踪的事件或脚本。 您可以按照上述描述创建过滤器，但在这种情况下，您需要离开窗格。 使用 PyCharm，您可以基于任何事件或脚本创建排除规则，一旦检测到此类事件或脚本，直接从 事件 窗格中操作。
动态创建排除规则
选择要排除的事件并选择 静音<事件名称>事件 或 静音<脚本名称>文件。 如果当前应用了用户定义的过滤器，新规则会静默添加到其中。 如果 全部捕获 当前处于活动状态，则会打开 Spy-js 捕获排除对话框 ，您可以基于所选事件或脚本创建新过滤器，或选择现有过滤器并将新规则添加到其中。
时间戳标签可帮助您在特定时间段内分析代码执行。 例如，您可以设置两个时间戳标签并查看它们之间捕获了哪些事件。 或者相反，您可以定位在某段时间内未捕获的事件，尽管您期望它们被捕获，从而检测性能问题。
设置时间戳标签
从 事件 窗格的上下文菜单中选择 添加标签。 一个标记为“标记于 <时间戳>”的标签会添加到文档节点下。
在窗格和编辑器之间导航
事件堆栈 窗格与 事件 窗格以及编辑器同步。
查看脚本或事件的调用堆栈
点击 事件 窗格中的事件或脚本。 其调用堆栈会显示在 事件堆栈 窗格中。
可选：要在编辑器中自动打开相应的跟踪文件，请按工具栏上的 自动滚动到跟踪 切换按钮。
在编辑器中打开事件或脚本的跟踪文件
跟踪文件是脚本的只读美化版本，命名为 <script name>.js.trace 。
在 事件堆栈 窗格中，双击脚本或事件，或在其上下文菜单中选择 跳转到跟踪。
激活自动导航 （点击 自动滚动到跟踪 ）并点击 事件 窗格中所需的事件或脚本。
将事件窗格直接与编辑器同步
按工具栏上的 自动滚动到跟踪 切换按钮。
之后，当点击 事件 窗格中的节点时，PyCharm 会在 事件堆栈 窗格中显示其调用堆栈，并在编辑器中打开相应的跟踪文件。 此外，当您滚动 事件堆栈 时，PyCharm 会自动在编辑器中打开相应的文件并高亮显示被调用的函数。
从函数导航到其调用
在 事件堆栈 窗格中，选择调用堆栈中的所需项目，并从上下文菜单中选择 跳转到调用方。
在 ECMAScript 6、TypeScript 或 CoffeeScript 中导航
Spy-js支持 源映射 ，这意味着您现在可以从 事件堆栈 窗格直接跳转到 ECMAScript 6、 TypeScript或 CoffeeScript的原始源代码，并观察哪些代码片段被执行。
Spy-js还会生成 映射跟踪文件。 这些是 ECMAScript 6、 TypeScript或 CoffeeScript的跟踪文件，扩展名为 .ts.trace 、 .coffee.trace 或 .js.trace 。 这些文件中的代码片段会被高亮显示，就像它们真的被执行过一样。
或者，您可以通过选择 跳转到跟踪 导航到已执行的 JavaScript 代码。
配置源映射的处理
通过点击
并从 事件 堆栈的工具栏上下文菜单中选择以下选项，配置源映射的处理方式：选择 启用源映射查找 以启用使用编译期间生成的源映射导航到 ECMAScript 6、 TypeScript或 CoffeeScript源代码。
选择 启用源映射生成 以为所有内容生成源映射以映射插装代码。 如果您打算在 Chrome Dev Tools或 FireFox FireBug开发工具中调试原始代码，请选择此选项。
选择 可用情况下始终打开源映射的跟踪 以在您从事件导航到其调用者时让 Spy-js尝试打开 映射跟踪文件。
从函数调用导航到其源代码
在 事件堆栈 窗格中，选择函数并从上下文菜单中选择以下选项之一：
要导航到 ECMAScript 6、TypeScript 或 CoffeeScript 源代码，请从上下文菜单中选择 跳转到源。
要导航到 JavaScript 跟踪文件，请选择 跳转到跟踪。
要导航到映射跟踪文件（ECMAScript 6、TypeScript 或 CoffeeScript），请选择 跳转到映射的跟踪。
从函数导航到其调用
在 事件堆栈 中选择函数并选择 跳转到调用方。
如果选择了 可用情况下始终打开源映射的跟踪 选项，则会打开相应的映射跟踪文件。
如果未选择 可用情况下始终打开源映射的跟踪 选项，则会打开 JavaScript 跟踪文件。
高级跟踪导航
通过高级跟踪导航，您可以基于调用遍历整个堆栈并定位未被调用的函数，也就是查找未执行的代码片段，并分析其被跳过的原因。
以下六个操作可用：在跟踪文件中移动到下一个/上一个函数的下一个/当前/上一个调用。 完整的操作列表可从 事件堆栈 窗格的上下文菜单中获取。 移动到所选函数的下一个和上一个调用、上一个函数的上一个调用以及下一个函数的下一个调用也可通过 事件堆栈 窗格的导航工具栏完成。
当您选择其中一个操作时，光标会跳转到堆栈中的调用。 如果按下 自动滚动到跟踪 切换按钮，相应的跟踪文件会自动打开，并将光标定位在调用处。
高级跟踪搜索
高级跟踪搜索允许您在整个跟踪（跨所有已跟踪的事件）中在函数的调用之间导航。 这意味着如果您在浏览器中跟踪 5 个页面， 事件 窗格相应地显示 5 个文档节点，PyCharm 会在所有这些节点下搜索所选函数的调用，并在 状态 栏中显示找到的调用数量。
当您执行另一个高级搜索或导航时，搜索结果会被重置，搜索工具栏会隐藏。
还请注意，当您选择 在所有事件中搜索此函数调用 选项时，会计算调用出现的次数。 当您分析检测到的调用时，时间会流逝，新事件会被捕获，第一个检测到的调用可能已经从堆栈中移除，这意味着它不再可供导航。
在所有文档节点中搜索函数的调用
在 事件堆栈 窗格中选择函数，并从上下文菜单中选择 在所有事件中搜索此函数调用。
找到的调用数量显示在 状态 栏中，工具栏显示四个先前隐藏的导航箭头按钮。
在找到的调用中导航
使用箭头按钮：
要跳转到第一个检测到的调用，请点击
。要跳转到最后一个检测到的调用，请点击
。要跳转到下一个检测到的调用，请点击
。 状态 栏显示一条消息： 第<number>次调用，共<total number of detected calls>次调用
。
要跳转到上一个检测到的调用，请点击
。
使用运行时数据扩展基本补全列表（Spy-js 自动补全）
Spy-js 自动补全术语指的是通过从运行时数据中检索建议来扩展 基本补全列表。 Spy-js 自动补全功能可用于 源文件中已执行的代码（在相应的 跟踪文件中以绿色高亮显示）。
当您将光标放在源文件中的符号上并按下 Ctrl+Space 时， Spy-js会从浏览器或正在运行的 Node.js 应用程序中检索数据，并根据以下规则将其与基本补全列表合并：
如果一个对象既存在于基本补全列表中又从运行时中检索到，则提供更多关于参数、属性、其类型等信息的变体会保留在列表中。 保留在列表中。
激活 Spy-js 自动补全
点击
按钮，在 事件 工具栏上，然后从列表中选择 启用 Spy-js 自动完成和放大镜。
在不运行调试会话的情况下评估表达式（Spy-js 放大功能）
Spy-js 放大功能指 评估表达式而无需实际运行调试会话。 当您点击一个表达式或将插入符号放置在其上，并按下 Ctrl+Alt+F8 时，一个工具提示会显示在表达式下方，显示表达式的值。 如果 Spy-js 检索到多个值，请点击工具提示中的 图标以展开值列表。
放大功能可用于 源文件中的已执行和尚未执行的代码。
默认情况下，该功能是关闭的。
激活 Spy-js 放大功能
点击
按钮，在 事件 工具栏上，然后从列表中选择 启用 Spy-js 自动完成和放大镜。
查看依赖关系图
使用 Spy-js，您可以为客户端和 Node.js 应用程序构建并检查运行时应用程序/事件图。
生成图表：
要构建整个应用程序内依赖关系的图表，请选择文档节点并从上下文菜单中选择 显示应用程序依赖关系图。
要构建单个事件的依赖关系图表，请在 事件 窗格中选择所需事件并选择 显示事件依赖关系图。
分析图表：
图表会在单独的编辑器选项卡中打开。 图表中的节点表示您的项目文件，而边表示源文件中有一个或多个函数调用目标文件中的函数。
要检查节点或边的详细信息，请选择节点或边，并在编辑器右上角的专用窗格中查看其 详细 树。 窗格显示连接的函数组合，以及调用所在的事件和调用的次数。