间谍-js
Spy-js 是一个用于调试、跟踪和分析在不同平台/浏览器/设备以及服务器端 Node.js 应用程序上运行的 JavaScript 的工具。Spy-js 识别源映射，因此您可以使用 CoffeeScript 和 TypeScript 代码跟踪应用程序。有关详细信息，请参阅调试 CoffeeScript和文件观察器。
使用 PhpStorm，您可以在特定于 SpyJS 的调试会话期间跟踪您的应用程序，并在专用 UI 中探索结果。
为了跟踪脚本，Spy-js 通过插入向 Spy-js UI 报告脚本执行时调用了哪些函数的检测指令来动态修改它。
Spy-js 使用不同的机制来跟踪 Web 应用程序和 Node.js 应用程序。
要修改网站脚本，Spy-js 必须充当“位于”您的浏览器和您正在跟踪的网站之间的代理服务器。当您在浏览器中打开一个被跟踪的网站时，Spy-js 接收脚本请求，从您的网站请求脚本，接收脚本，进行所需的修改，并将其发送回您的浏览器执行脚本，并发送运行时Spy-js UI 的信息。
对于 Node.js 应用程序，如果应用程序已经在运行，Spy-js 将无法在 Node.js 服务器和脚本之间进行访问。因此，要跟踪 Node.js 应用程序，spy-js 会启动 Node.js 服务器和应用程序本身。这使 Spy-js 能够拦截和修改脚本请求和脚本，因此跟踪过程就像跟踪网站脚本时一样运行。
在你开始前
下载并安装Node.js。
在Settings/Preferences |安装并启用Spy-js插件 插件页面，选项卡Marketplace，如从 JetBrains 存储库安装插件中所述。
Spy-js 用户界面
所有与跟踪相关的活动，例如查看捕获的事件、检查它们的调用堆栈、导航到源代码等，都在专用的Spy-js 工具窗口中执行，特别是在其跟踪运行选项卡中。该选项卡由一个工具栏和三个窗格组成：
事件窗格
该窗格显示捕获的事件树。顶级节点表示作为涉及跟踪的网页的文档。当您将鼠标悬停在文档上时，PhpStorm 会显示一个工具提示，其中包含文档的 URL 地址、打开文档的浏览器以及运行浏览器的操作系统。文档节点还提供了一个图标，该图标指示打开它的浏览器。
在每个文档节点下，列出了在页面上检测到的事件以及从其启动的脚本。相同类型的事件被分组到可视容器中。容器的标题显示分组在其中的事件的名称、容器内所有事件的平均执行时间以及容器内的事件数。您可以展开每个节点并检查其中的各个事件。
脚本文件名具有不同的颜色指示符，有助于在使用“事件堆栈”窗格时区分它们。通过将鼠标悬停在脚本文件名上，您可以看到完整的脚本 URL。
单击事件后，其调用堆栈将显示在“事件堆栈”窗格中。堆栈由函数调用树表示。
事件堆栈窗格
单击“事件”窗格中的事件后，其调用堆栈将显示在“事件堆栈”窗格中。堆栈由函数调用树表示。每个树节点代表调用的函数。节点文本包含总执行时间、脚本文件名和函数名。单击节点时，“快速评估”窗格会显示其他函数调用详细信息、参数值和返回值，如果在函数执行期间发生异常详细信息。
该窗格与编辑器同步，因此您可以从堆栈树中的项目导航到相应的跟踪文件或源文件。
跟踪文件是脚本的写保护美化版本，名为<script name>.js.trace。当您双击堆栈树中的项目或选择它并从选择的上下文菜单中选择跳转到跟踪时，相应的跟踪文件将在编辑器中打开，光标位于单击的函数上。另一种方法是按下Autoscroll to Trace切换按钮并选择各种堆栈节点。在这种情况下，当您单击“事件”窗格中的事件或脚本时，将打开跟踪文件。
您不仅可以跳转到一个函数，还可以跳转到代码中调用它的位置。为此，请选择所需的项目并从上下文菜单中选择跳转到调用者。
文件的内容被高亮显示以显示所选堆栈节点的代码执行路径。
当您使用ECMASript6、CoffeeScript和TypeScript代码 跟踪应用程序时， Spy-js还会生成映射的跟踪文件。这些是EcmaScript 6、TypeScript或CoffeeScript跟踪文件，扩展名为.ts.trace、.coffee.trace或.js.trace。这些文件中的代码片段被突出显示，就好像它们真的被执行了一样。
您还可以通过在“事件堆栈”窗格中选择一个项目并从所选内容的上下文菜单中选择“跳转到源”来导航到按原样显示的源文件，而无需美化。如果被跟踪的站点映射有 PhpStorm 项目，PhpStorm 会根据映射检测到对应的本地文件，并在编辑器中打开该文件。如果您正在跟踪未映射到 PhpStorm 项目的站点，PhpStorm 会打开只读页面源，就像您在浏览器中选择了查看页面源一样。
当跟踪站点映射到 PhpStorm 项目时，PhpStorm 会在任何尝试编辑打开的跟踪文件时打开源文件。
快速评估窗格
当您单击事件堆栈窗格中的节点时，快速评估窗格会显示其他函数调用详细信息、参数值和返回值，如果在函数执行期间发生异常详细信息。
启动 Spy-js 跟踪会话
从 PhpStorm 开始， Spy-js以用于跟踪 Web 应用程序的Spy-js类型或用于跟踪 Node.js 应用程序的 Node.js 类型的 Spy-js的运行/调试配置启动。
创建 Spy-js 调试配置
单击工具栏上的 并从列表中
选择Spy-js 。运行/调试配置：Spy-js对话框打开。
指定要使用的 Node.js 解释器。
跟踪服务器端口是自动填写的。为避免端口冲突，建议您接受建议的值并选中自动配置系统代理复选框。因此，系统代理服务器会自动设置指定的端口号。
或者，手动配置您的系统代理端口。
转到并打开使用代理服务器。在端口字段中，输入跟踪服务器端口号。
从微软官方网站了解更多信息。
转到，单击Advanced，切换到Proxies选项卡，清除Automatic Proxy Configuration，然后键入您的 Proxy 配置文件的 URL 地址。确保 URL 中的端口与运行/调试配置中的跟踪服务器端口相同。
从Apple 官方网站了解更多信息。
从“使用”列表中，选择指定配置跟踪会话的方式的方式。
要让Spy-js应用其内部预定义配置，请选择Default configuration。
要应用自定义手动创建的配置，请选择配置文件选项，然后在下面的配置字段中指定自定义配置文件的位置。
配置文件是扩展名为.js或.conf.js的JavaScript 文件，其中包含满足Spy-js 配置要求的有效 JavaScript 代码。如果 PhpStorm 在项目中检测到扩展名为.conf.js的文件，这些文件会显示在列表中。
手动键入配置文件的路径，或单击浏览
并在打开的对话框中选择位置。一旦指定，配置文件将添加到列表中，以便您下次可以从列表中获取 if，而不是指定路径。
开始跟踪 Web 应用程序
在工具栏的Select run/debug configuration列表中选择新创建的配置，然后单击。Spy-js 工具窗口打开时有一个空的Trace Run选项卡和一个Trace Proxy Server选项卡，通知您代理服务器的状态。
切换到浏览器并刷新页面以开始调试。Spy-js 开始在此页面上捕获事件，并且Spy-js工具窗口将它们显示在“事件”窗格中。
为 Node.js 调试配置创建 Spy-js
单击工具栏上的 并从列表中
选择Spy-js for Node.js。运行/调试配置：Node.js 的 Spy-js对话框打开。
指定要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或Windows Subsystem for Linux 上的Node.js。
指定用于启动应用程序的 JavaScript 文件。
如果要跟踪 CoffeeScript，请指定生成的 JavaScript 文件的路径。该文件可以在外部生成，也可以通过使用 File Watchers 进行编译来生成。有关更多详细信息，请参阅调试 CoffeeScript。
跟踪服务器端口是自动填写的。为避免端口冲突，建议您接受建议的值并选中自动配置系统代理复选框。因此，系统代理服务器会自动设置指定的端口号。
或者，手动配置您的系统代理端口。
转到并打开使用代理服务器。在端口字段中，输入跟踪服务器端口号。
从微软官方网站了解更多信息。
转到，单击Advanced，切换到Proxies选项卡，清除Automatic Proxy Configuration，然后键入您的 Proxy 配置文件的 URL 地址。确保 URL 中的端口与运行/调试配置中的跟踪服务器端口相同。
从Apple 官方网站了解更多信息。
使用配置设置指定配置文件以应用于跟踪会话。
配置文件是扩展名为.js或.conf.js的JavaScript 文件，其中包含满足Spy-js 配置要求的有效 JavaScript 代码。如果 PhpStorm 在项目中检测到扩展名为.conf.js的文件，这些文件会显示在列表中。
手动键入配置文件的路径，或单击浏览
并在打开的对话框中选择位置。一旦指定，配置文件将添加到列表中，以便您下次可以从列表中获取 if，而不是指定路径。可选：
键入自定义 Node.js 启动的节点参数。
例如，要启用跟踪ECMAScript 6脚本，请指定
--harmony为 Node 参数。请注意，Node.js 必须是 0.11.13 或更高版本。选择应用程序的工作目录。
默认情况下，该字段显示项目根文件夹。
通过process.argv数组指定要在启动时传递给应用程序的 Node.js 特定参数。
指定 Node.js 可执行文件的环境变量（如果适用）。有关详细信息，请参阅运行/调试配置：Node.js的 Spy-js。
开始跟踪 Node.js 应用程序
在工具栏的Select run/debug configuration列表中选择新创建的配置，然后单击。Spy-js 工具窗口打开，在Trace Run选项卡中显示捕获的事件。
保存和加载跟踪会话
Spy-js 将跟踪会话的调用和属性存储在可以压缩到zip存档中的.json文件中。您可以在以后随时提取它们以将跟踪会话图像加载到 Spy-js 中。请注意，加载的图像不会恢复会话，因为实际上没有执行任何脚本。您所能做的就是分析先前执行的代码的流程和属性。
保存跟踪会话的图像
单击
事件工具栏，然后从列表中选择保存跟踪。PhpStorm 将所有受影响的.json文件压缩到一个zip存档中，并打开保存存档的文件夹。
加载先前跟踪会话的图像
要激活 Spy-js，请启动与图像中保存的会话相同类型的跟踪会话，分别为 Spy-js 或 Node.js 的 Spy-js，请参阅上面的启动 Spy-js 跟踪会话。
单击事件
工具栏上的按钮并从列表中选择加载跟踪。在打开的对话框中，选择带有所需会话图像的zip存档的位置。Spy-js 停止运行并在名为Loaded <loaded session>的新选项卡中显示加载的跟踪。
配置事件捕获策略
默认情况下，Spy-js 会捕获所有打开的网页上的所有事件，不包括https 安全网站，除非您在运行配置中明确指定它们的 URL 地址。所有捕获的事件都显示在Spy-js工具窗口的事件窗格中。您可以通过应用用户定义的事件过滤器来禁止捕获某些类型的事件。
您可以动态定义新的自定义过滤器或将事件模式添加到现有过滤器。
查看可用的已配置过滤器
单击
工具栏上的 。当前应用的过滤器标有勾号。默认情况下，应用捕获所有预定义过滤器。
在不停止应用程序的情况下停止捕获事件
单击工具栏上的捕获事件按钮，然后从上下文菜单中
选择全部静音。应用程序仍在运行，但“事件”窗格显示最后捕获的事件。如果您要分析脚本并因此需要将其显示在“事件”窗格中但在捕获新事件时不将其删除，这将很有帮助。
定义新的事件过滤器
单击工具栏上的捕获事件按钮
，然后从列表中选择编辑捕获排除项。在打开的Spy-js Capture Exclusions 对话框中，单击左侧窗格中的添加。
在右侧窗格中，在排除名称字段中指定过滤器名称并配置排除规则列表。
要添加规则，请单击
，将打开“将条件添加到排除”对话框。在值/模式字段中键入模式，在条件类型列表中指定模式是否应应用于事件类型或脚本名称。请注意，使用了glob 模式匹配。当您单击OK时，PhpStorm 会将您带到Spy-js Capture Exclusions Dialog。要编辑规则，请在列表中选择它，单击
，然后在打开的对话框中更新规则。要删除规则，请在列表中选择它并单击
。
选择要应用的过滤器
单击
并选中列表中所需过滤器旁边的复选框。如果没有配置过滤器或没有可用的过滤器适合该任务，请按上述方式创建一个新过滤器。
在“事件”窗格中浏览已捕获事件的树时，您可能会遇到一些您绝对不想跟踪的事件或脚本。您可以如上所述创建过滤器，但在这种情况下，您必须离开窗格。使用 PhpStorm，只要您检测到此类事件或脚本，就可以直接从事件窗格中创建基于任何事件或脚本的排除规则。
即时创建排除规则
选择要排除的事件并选择Mute <event name> event或Mute <script name> file。如果当前应用了用户定义的过滤器，则新规则会以静默方式添加到其中。如果Capture All当前处于活动状态，则会打开Spy-js Capture Exclusions 对话框，您可以在其中基于所选事件或脚本创建新过滤器，或选择现有过滤器并将新规则添加到其中。
时间戳标签可帮助您分析特定时间段内的代码执行情况。例如，您可以设置两个时间戳标签并查看在它们之间捕获了哪些事件。或者相反，您可以定位在某个时间段内未捕获的事件，尽管您预计它们会出现，从而检测性能问题。
设置时间戳标签
从“事件”窗格的上下文菜单中选择“添加标签”。在 <timestamp> 标记的标签被添加到文档节点下。
在窗格和编辑器之间导航
事件堆栈窗格与事件窗格和编辑器同步。
查看脚本或事件的调用堆栈
单击“事件”窗格中的事件或脚本。它的调用堆栈显示在事件堆栈窗格中。
可选：要在编辑器中自动打开相应的跟踪文件，请按工具栏上的Autoscroll to Trace切换按钮。
在编辑器中打开事件或脚本的跟踪文件
跟踪文件是脚本的写保护美化版本，名为<script name>.js.trace。
在Event Stack窗格中，单击脚本或事件两次，或者在其上下文菜单中选择Jump to Trace 。
激活自动导航（单击Autoscroll to Trace ）并在Events窗格中单击所需的事件或脚本。
将事件窗格直接与编辑器同步
按工具栏上的Autoscroll to Trace切换按钮。
之后，在“事件”窗格中单击节点时，PhpStorm 在“事件堆栈”窗格中显示其调用堆栈，然后在编辑器中打开相应的跟踪文件。此外，当您滚动浏览事件堆栈时， PhpStorm 会自动在编辑器中打开相应的文件并突出显示调用的函数。
从一个函数导航到它的调用
在Event Stack窗格中，在调用堆栈中选择所需的项目，然后从所选内容的上下文菜单中选择Jump to Caller。
浏览 ECMAScript 6、TypeScript 或 CoffeeScript
Spy-js支持source maps，这意味着您现在可以从Event Stack窗格直接跳转到ECMAScript 6、TypeScript或CoffeeScript中的原始源代码，并观察执行了哪些代码片段。
Spy-js还生成映射的跟踪文件。这些是EcmaScript 6、TypeScript或CoffeeScript跟踪文件，扩展名为.ts.trace、.coffee.trace或.js.trace。这些文件中的代码片段被突出显示，就好像它们真的被执行了一样。
或者，您可以通过选择Jump to Trace导航到已执行的 JavaScript 代码。
配置源映射的处理
通过单击事件
堆栈的工具栏并从上下文菜单中选择以下选项来配置源映射的处理方式：选择Enable Source Map Look-up以使用编译期间生成的源映射启用到ECMAScript 6、TypeScript或CoffeeScript源代码的导航。
选择Enable source map generation，为所有内容生成源映射以映射检测代码。如果您要在Chrome Dev Tools或FireFox FireBug开发工具中调试原始代码，请选择此选项。
选择Always open source mapped trace if available，让Spy-js在您调用从事件到其调用者的导航时尝试打开映射的跟踪文件。
从函数调用导航到其源代码
在“事件堆栈”窗格中，选择函数并从所选内容的上下文菜单中选择以下选项之一：
要导航到 ECMAScript 6、TypeScript 或 CoffeeScript 源代码，请从选择的上下文菜单中选择Jump to Source 。
要导航到 JavaScript 跟踪文件，请选择Jump to Trace。
要导航到映射的跟踪文件（ECMAScript 6、TypeScript 或 CoffeeScript），请选择Jump to Mapped Trace。
从一个函数导航到它的调用
选择Event Stack中的函数并选择Jump to Caller。
如果选择了Always open source mapped trace if available选项，则会打开相应的映射跟踪文件。
如果未选择Always open source mapped trace if available选项，则会打开 JavaScript 跟踪文件。
高级跟踪导航
借助高级跟踪导航，您可以根据调用在整个堆栈中移动并定位尚未调用的函数，即定位尚未执行的代码片段并分析它们被跳过的原因。
可以使用以下六个操作： 移至跟踪文件中下一个/当前/上一个函数的下一个/上一个调用。完整的操作列表可从“事件堆栈”窗格的上下文菜单中获得。移至所选函数的下一个和上一个调用、上一个函数的上一个调用以及下一个函数的下一个调用也可以从事件堆栈窗格的导航工具栏中获得。
高级跟踪搜索
高级跟踪搜索可让您在整个跟踪中的函数调用之间导航（跨越所有跟踪的事件）。这意味着如果您在浏览器中跟踪 5 个页面，并且事件窗格相应地显示 5 个文档节点，PhpStorm 会在所有这些节点下搜索所选函数的调用，并在状态中显示找到的函数调用数酒吧。
当您调用另一个高级搜索或导航时，搜索结果会重置并且搜索工具栏会隐藏。
另请记住，当您选择Search this function calls across all events选项时，将计算调用发生的次数。当您分析检测到的调用时，时间过去了，新事件被捕获，并且第一个检测到的调用可能恰好已经从堆栈中删除，这意味着它不再可用于导航。
在所有文档节点中搜索函数的调用
在Event Stack窗格中选择函数，然后从所选内容的上下文菜单中选择Search this function calls across all events。
找到的呼叫数显示在状态栏中，工具栏显示四个以前隐藏的导航 V 形按钮。
在找到的呼叫中导航
使用 V 形按钮：
要跳转到第一个检测到的呼叫，请单击
。要跳转到上次检测到的呼叫，请单击
要跳转到下一个检测到的呼叫，请单击
状态栏显示一条消息：发生 <number> of <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 放大）
术语Spy-js 放大表示 在不实际运行调试会话的情况下评估表达式。当您单击表达式或将插入符号放置在其上并按Ctrl+Alt+F8时，将在表达式下方显示一个工具提示，以显示表达式值。如果Spy-js检索到多个值，请单击工具提示中的图标以展开值列表。
放大功能可从源文件中获得，用于已执行和尚未执行的代码。
默认情况下，该功能处于关闭状态。
激活 Spy-js 放大
单击事件
工具栏上的按钮，然后从列表中选择启用 Spy-js 自动完成和放大镜。
查看依赖关系图
使用 Spy-js，您可以构建和检查客户端和 Node.js 应用程序的运行时应用程序/事件图。
生成图表：
要使用整个应用程序中的依赖关系构建图表，请选择文档节点并从选择的上下文菜单中选择显示应用程序依赖关系图。
要使用单个事件的依赖关系构建图表，请在“事件”窗格中选择所需的事件，然后选择“显示事件依赖关系图”。
分析图：
该图在单独的编辑器选项卡中打开。图中的节点代表您的项目文件，而边缘代表源文件中有一个或多个函数调用目标文件中的函数的事实。
要检查节点或边的详细信息，请选择节点或边并在编辑器右上角的专用窗格中查看其详细信息树。该窗格显示连接功能组合，以及在其中进行调用的事件和进行的调用次数。