使用 Spy-js 对 JavaScript 进行性能分析
Spy-js 是一款用于调试、跟踪和分析运行于不同平台、浏览器和设备上的 JavaScript，以及后端 Node.js 应用程序的工具。 Spy-js 可以识别 source map，因此可以跟踪包含 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。
按照 从 JetBrains Marketplace 安装插件中所述，在 设置 | 插件 页面的 Marketplace 选项卡中安装并启用 Spy-js 插件。
Spy-js 用户界面
所有与跟踪相关的操作，例如查看捕获的事件、检查其调用堆栈、导航到源代码等，都在专用的 Spy-js 工具窗口中，特别是在其 Trace Run 标签页中执行。 该标签页包含一个工具栏和三个窗格：
事件面板
此窗格显示捕获事件的树状结构。 顶层节点表示参与跟踪的网页 document。 当您将鼠标悬停在 document 上时，WebStorm 会显示包含该 document 的 URL 地址、打开它的浏览器，以及该浏览器运行所在的操作系统的工具提示。 document 节点还带有一个图标，指示其所打开的浏览器。
在每个 document 节点下，列出了页面上检测到的事件和从其启动的脚本。 类型相同的事件被分组到可视容器中。 容器的标题显示其包含的事件名称、该容器中所有事件的平均执行时间以及事件数量。 您可以展开每个节点并检查其中的各个事件。
脚本文件名配有不同的颜色标识，有助于在使用 事件堆栈 窗格时区分它们。 将鼠标悬停在某个脚本文件名上，即可查看完整的脚本 URL。
点击某个事件后，其调用堆栈将显示在 事件堆栈 窗格中。 堆栈以函数调用树的形式体现。
事件堆栈面板
点击 事件 窗格中的某个事件后，其调用堆栈将显示在 事件堆栈 窗格中。 堆栈以函数调用树的形式体现。 每个树节点代表所调用的函数。 节点文本包含函数的总执行时间、脚本文件名及函数名称。 单击某个节点时， 快速求值 窗格将显示额外的函数调用信息、参数值和返回值，以及函数执行过程中（若有）发生的异常详细信息。
该窗格与编辑器同步，因此您可以从堆栈树中的某个项目导航至相应的 trace file 或 source file。
trace file 是脚本的只读美化版本，命名为 <script name>.js.trace 。 双击堆栈树中的项目或选中它并从其上下文菜单中选择 跳转到追踪 ，即可在编辑器中打开对应的 trace file ，并将光标定位在所点击的函数处。 另一种方法是按下 自动滚动到追踪 切换按钮并选择不同的堆栈节点。 在这种情况下，点击 事件 窗格中的事件或脚本时会打开 trace file。
您不仅可以跳转到某个函数，也可以跳转到代码中调用该函数的位置。 为此，请选择所需项目并从上下文菜单中选择 跳转到调用方。
文件内容会被高亮显示，以展示所选堆栈节点的代码执行路径。
当您跟踪包含 ECMASript6、 CoffeeScript 和 TypeScript 代码的应用程序时， Spy-js 也会生成 mapped trace file。 这些是带有扩展名 .ts.trace 、 .coffee.trace 或 .js.trace 的 EcmaScript 6、 TypeScript 或 CoffeeScript trace file。 这些文件中的代码片段会被高亮显示，就如同它们实际已执行过一样。
您还可以导航到原样显示（未美化）的 source file ，方法是选中 事件堆栈 窗格中的某个项目，并从该项目的上下文菜单中选择 跳转到源代码。 如果已将被跟踪的网站与 一个 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。将打开 运行/调试配置：Spy-js for Node.js 对话框。
指定要使用的 Node.js 解释器。
如果选择 项目 别名，WebStorm 将自动使用 Node 解释器 字段中位于 Node.js 页面上的项目默认解释器。 在大多数情况下，WebStorm 会自动检测项目默认解释器并填写该字段。
您还可以选择另一个已配置的本地或远程解释器，或点击
以配置新的解释器。有关更多信息，请参阅 配置远程 Node.js 解释器、 配置本地 Node.js 解释器 和 在 Windows 子系统中使用 Node.js。
指定用于启动应用程序的 JavaScript 文件。
如果要跟踪 CoffeeScript，请指定生成的 JavaScript 文件路径。 该文件可以通过外部方式生成，也可以借助 File Watchers 编译得到。 有关详细信息，请参阅 调试 CoffeeScript。
trace server port 会自动填写。 为避免端口冲突，建议接受建议值，并保持选中 自动配置系统代理 复选框。 结果是，指定的端口号会自动设置为系统代理服务器的端口。
或者，手动配置系统代理端口。
转到 并打开 使用代理服务器。 在 端口 字段中，键入 trace server port 号。
有关更多信息，请参阅 Microsoft 官方网站。
转到 ，点击 高级 ，切换至 代理 选项卡，清除 自动代理配置 ，然后输入 Proxy 配置文件的 URL 地址。 请确保 URL 中的端口与运行/调试配置中的 trace server port 相同。
有关更多信息，请参阅 Apple 官方网站。
指定包含要应用于追踪会话的配置设置的配置文件。
configuration file 是具有 .js 或 .conf.js 扩展名的 JavaScript 文件，包含符合 Spy-js configuration requirements 的有效 JavaScript 代码。 如果 WebStorm 在项目中检测到扩展名为 .conf.js 的文件，这些文件会显示在列表中。
手动键入配置文件的路径，或点击 浏览
并在打开的对话框中选择位置。 指定后，配置文件将添加到列表中，方便下次直接从列表中选择，而无需重新指定路径。可选：
键入用于自定义 Node.js 启动的 Node 参数。
例如，为启用对 ECMAScript 6 脚本的追踪，请将
--harmony指定为 Node 参数。 请注意，Node.js 必须为 0.11.13 或更高版本。选择应用程序的 working directory。
默认情况下，此字段显示 project root folder。
指定要通过 process.argv 数组传递给应用程序的 Node.js 特定参数。
如适用，请为 Node.js 可执行文件指定 environment variables。 有关更多信息，请参阅 运行/调试配置：Spy-js for Node.js。
启动 Node.js 应用程序的跟踪
在工具栏的 选择运行／调试配置 列表中选择 newly created configuration ，然后点击
。 Spy-js Tool Window 将打开，并在 追踪运行 选项卡中显示捕获的事件。
保存和加载跟踪会话
Spy-js 将追踪会话的调用与属性存储在 .json 文件中，这些文件可以压缩为 zip 存档。 之后，您可以随时解压这些文件，将追踪会话镜像加载到 Spy-js 中。 请注意，加载的镜像不会恢复会话，因为实际上没有脚本被执行。 您只能分析先前执行代码的流程与属性。
保存跟踪会话图像
点击
，位于 事件 工具栏上，然后从列表中选择 保存追踪。 WebStorm 会将所有受影响的 .json 文件压缩为一个 zip 存档，并打开该存档所在的文件夹。
加载之前的跟踪会话图像
要激活 Spy-js，请启动与镜像中保存的会话类型相同的追踪会话，分别为 Spy-js 或适用于 Node.js 的 Spy-js，详见上文 Initiating a Spy-js Tracing Session。
点击
按钮，位于 事件 工具栏上，然后从列表中选择 加载追踪。在打开的对话框中，选择包含所需会话镜像的 zip 存档所在位置。 Spy-js 将停止运行并在名为 已加载 <loaded session> 的新选项卡中显示加载的追踪。
配置事件捕获策略
默认情况下，Spy-js 会捕获所有已打开网页上的事件， https secure 网站除外，除非您在运行配置中明确指定其 URL 地址。 所有捕获的事件将显示在 事件 面板中的 Spy-js 工具窗口中。 您可以通过应用用户自定义事件过滤器来抑制某些类型事件的捕获。
您可以即时定义新的自定义过滤器，或向现有过滤器添加事件模式。
查看已配置的可用过滤器
点击工具栏上的
。 当前应用的过滤器会以对号标记。 默认情况下，会应用 捕获全部 预定义过滤器。
在不断开应用程序的情况下停止捕获事件
在工具栏中点击 捕获事件 按钮
，然后从上下文菜单中选择 全部静音。 应用仍在运行，但 事件 窗格显示最后捕获的事件。 这在您想要分析某个脚本并需要将其显示在 事件 窗格中而不希望在捕获新事件时将其移除时非常有用。
定义新事件过滤器
点击工具栏中的 捕获事件 按钮
，然后从列表中选择 编辑捕获排除项。在打开的 Spy-js 捕获排除对话框中，点击左侧窗格中的 添加
。在右侧窗格中，在 排除项名称 字段中指定过滤器名称，并配置排除规则列表。
要添加规则，请点击
，系统将打开 为排除项添加条件 对话框。 在 值／模式 字段中输入一个模式，在 条件类型 列表中指定该模式应应用于事件类型还是脚本名称。 请注意，使用的是 glob 模式匹配。 点击 确定 后，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 支持 source maps ，这意味着现在您可以从 事件堆栈 窗格直接跳转到 ECMAScript 6、 TypeScript 或 CoffeeScript 的原始源代码，并观察哪些代码片段被执行了。
Spy-js 还会生成 mapped trace file。 这些是带有扩展名 .ts.trace 、 .coffee.trace 或 .js.trace 的 EcmaScript 6、 TypeScript 或 CoffeeScript 跟踪文件。 这些文件中的代码片段会高亮显示，就像它们确实已被执行过一样。
或者，您可以通过选择 跳转到追踪 来导航到已执行的 JavaScript 代码。
配置 source map 处理方式
通过点击
并从 事件 堆栈工具栏中选择上下文菜单中的以下选项，配置 source maps 的处理方式：选择 启用 Source Map 查找 ，启用通过编译时生成的 source maps 导航至 ECMAScript 6、 TypeScript 或 CoffeeScript 源代码。
选择 启用 source map 生成 ，为所有内容生成 source maps，以映射插桩后的代码。 如果您打算在 Chrome Dev Tools 或 FireFox FireBug 开发工具中调试原始代码，请选择此选项。
选择 如有可用，始终打开 source map 映射追踪 ，让 Spy-js 在您从事件导航到其调用者时尝试打开 mapped trace file。
从函数调用跳转至其源代码
在 事件堆栈 窗格中，选择函数并在所选项的上下文菜单中选择以下选项之一：
要导航到 ECMAScript 6、TypeScript 或 CoffeeScript 源代码，请在所选项的上下文菜单中选择 跳转到源代码。
要导航到 JavaScript 跟踪文件，请选择 跳转到追踪。
要导航到 mapped trace file（ECMAScript 6、TypeScript 或 CoffeeScript），请选择 跳转到映射追踪。
从函数导航至其调用
在 事件堆栈 中选择函数，然后选择 跳转到调用方。
如果已选择 如果可用，始终打开映射的源跟踪 选项，则会打开相应的 mapped trace file。
如果未选择 如果可用，始终打开映射的源跟踪 选项，则会打开 JavaScript 跟踪文件。
高级跟踪导航
借助高级跟踪导航，您可以按调用遍历整个调用堆栈，并定位尚未调用的函数，即定位未执行的代码片段，并分析其被跳过的原因。
可用以下六种操作：在跟踪文件中移动到下一个／上一个调用，以及下一个／当前／上一个函数的调用。 完整的操作列表可通过 事件堆栈 窗格中的上下文菜单访问。 在 事件堆栈 窗格的导航工具栏中也可以执行移动到所选函数的前后调用、前一个函数的前一个调用以及下一个函数的下一个调用的操作。
选择其中一个操作时，插入符将跳转至堆栈中的调用处。 如果按下了 自动滚动到跟踪 切换按钮，则相应的跟踪文件会自动打开，并将插入符定位到调用位置。
高级跟踪搜索
借助高级跟踪搜索，您可以在整个跟踪过程中（跨所有已跟踪事件）在函数调用之间导航。 这意味着，如果您正在浏览器中跟踪 5 个页面， 事件 窗格将分别显示 5 个文档节点，WebStorm 会在所有这些节点下搜索所选函数的调用，并在状态栏中显示检测到的调用次数。
当您执行另一次高级搜索或导航操作时，搜索结果会被重置，搜索工具栏也会隐藏。
另请注意，只有在选择 在所有事件中搜索该函数调用 选项后，才会计算调用出现的次数。 随着您分析检测到的调用，时间推移，会捕获新的事件，最初的调用可能已经从堆栈中移除，因而不再可用于导航。
在所有文档节点中搜索函数调用
在 事件堆栈 窗格中选择函数，然后从所选项的上下文菜单中选择 在所有事件中搜索此函数的调用。
在状态栏中会显示找到的调用次数，工具栏将显示四个先前隐藏的导航尖括号按钮。
在发现的调用中导航
使用尖括号按钮：
要跳转到首次检测到的调用，请点击
。要跳转到最后一次检测到的调用，请点击
要跳转到下一个检测到的调用，请点击
状态栏中将显示一条消息： Occurrence <number> of <total number of detected calls>
要跳转到上一个检测到的调用，请点击
。
使用运行时数据扩展基础补全列表（Spy-js 自动补全）
术语 Spy-js autocompletion 指的是将 basic completion list 扩展为包含来自运行时数据的建议项。 Spy-js autocompletion 功能适用于已执行（在对应的 trace 文件中以绿色高亮显示）的 source 文件。
当您将插入符置于源文件的某个符号处并按下 Ctrl+Space 时， Spy-js 会从浏览器或正在运行的 Node.js 应用程序中检索数据，并根据以下规则将其与 basic completion list 合并：
如果某个对象既出现在 basic completion list 中，又从运行时检索而来，则保留包含更多参数、属性及其类型等信息的版本。 保留在列表中。
激活 Spy-js 自动补全
点击
按钮，在 事件 工具栏上，然后从列表中选择 启用 Spy-js 自动完成和放大镜功能。
无需运行调试会话即可评估表达式（Spy-js 放大功能）
术语 Spy-js magnification 是指在未实际运行调试会话的情况下 评估表达式。 当您单击某个表达式或将插入符号置于其上并按下 Ctrl+Alt+F8 时，会在表达式下方显示一个工具提示，显示该表达式的值。 如果 Spy-js 检索到多个值，请点击工具提示中的 图标以展开值列表。
放大 功能可在 源文件中用于已执行和未执行的代码。
默认情况下，此功能处于关闭状态。
激活 Spy-js 放大功能
点击
按钮位于 事件 工具栏中，然后从列表中选择 启用 Spy-js 自动完成和放大镜功能。
查看依赖关系图
使用 Spy-js，您可以为客户端和 Node.js 应用程序构建并查看运行时应用程序／事件图。
生成图表：
要构建包含整个应用程序中依赖关系的图表，请选择文档节点，然后从所选项的上下文菜单中选择 显示应用依赖图。
要构建包含单个事件依赖关系的图表，请在 事件 面板中选择所需事件并选择 显示事件依赖图。
分析图表：
图表将在单独的编辑器选项卡中打开。 图表中的节点表示您的项目文件，边则代表源文件中存在一个或多个函数调用目标文件中的函数。
要查看某个节点或边的详细信息，请选择该节点或边，然后在编辑器右上角的专用面板中查看其 详细信息 树。 该面板显示连接函数的组合，以及调用发生的事件和调用次数。