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