V8 CPU 和内存分析
借助 WebStorm，您可以使用V8 的基于样本的分析器为您的Node.js应用程序捕获和分析 CPU 配置文件和堆快照。
您还可以打开并浏览在 Google Chrome DevTools 中为您的客户端代码捕获的快照。
在你开始前
确保在Settings/Preferences |上启用了Node.js插件。插件页面，标签Installed。有关详细信息，请参阅管理插件。
CPU 分析
CPU 分析可帮助您更好地了解代码的哪些部分占用最多 CPU 时间，以及 V8 JavaScript 引擎如何执行和优化代码。
WebStorm 中的 Node.js CPU 分析基于 V8 内置 CPU 分析器，它提供有关代码执行和 JavaScript 引擎本身行为的信息，包括垃圾收集周期、编译和重新编译以及代码优化。
分析器以称为滴答的特定间隔拍摄快照。测量不仅针对您的代码工作，还针对引擎本身执行的活动，例如编译、系统库调用、优化和垃圾收集。
启用 CPU 分析
要在应用程序启动时调用 V8 CPU 分析，您需要在Node.js运行配置中指定其他设置。
从主菜单中，选择。或者，从工具栏上的列表中选择编辑配置。单击工具栏上的 并从列表中
选择Node.js。从列表中，选择Node.js运行配置以激活 CPU 分析或创建新配置，如运行和调试 Node.js中所述。
切换到V8 Profiling选项卡并选中Record CPU profiling info复选框。在日志文件夹字段中，指定将存储记录日志的文件夹的路径，日志文件命名为
isolate-<session number>.
收集 CPU 分析信息
从主工具栏上的列表中选择运行配置，然后单击
或选择从主菜单当您需要分析的场景被执行时，通过单击
工具栏的 停止该过程。
分析 CPU 分析日志
当您停止应用程序时，WebStorm 会自动打开V8 Profiling工具窗口并在其中显示收集到的分析数据。如果窗口已经打开并显示为另一个会话收集的数据，WebStorm 会打开一个新选项卡。自动打开的选项卡以控制应用程序执行和收集分析数据的运行配置命名。
要打开和分析一些以前保存的分析数据，请转到（或按Ctrl+Shift+A），开始输入，然后从列表中V8选择Analyze V8 Profiling Log 。
然后选择相关的 V8 日志文件isolate-<session number>。WebStorm 使用所选日志文件的名称创建一个单独的选项卡。
基于收集到的分析数据，WebStorm 构建了三个调用树，并将它们中的每一个都显示在一个单独的窗格中。使用这些调用树，您可以从两个不同的角度分析应用程序的执行：一方面，哪些调用耗时（“繁重”），另一方面，“谁调用了谁”。
了解调用树中的指标
调用树使用Total和Self指标来表示函数中的滴答数或其与总执行时间的比率：
Total显示了在函数中花费了多少时间以及它调用的函数。
Self显示了仅在函数本身内部花费了多少时间，而不考虑其子节点。
Of Parent指标显示函数的纯执行时间与调用它的函数 ( Parent )的执行时间的比率。
V8 优化器
在某些情况下，V8 可以优化您的代码，有关详细信息，请参阅优化 V8：
函数名称前的星号
*表示该函数已被优化。波浪号
~表示该函数可能需要优化但尚未优化。如果代码运行时间很短，引擎可能会推迟优化或跳过优化，但是波浪号指向可以重写代码以获得更好性能的地方。
顶部调用树
Top Calls窗格按Self指标以降序排列已执行的活动。对于每个活动，都会显示其Total、Total%和Self%指标。对于每个函数调用，WebStorm 会显示定义函数的文件名、行和列。
概览窗格中的图表显示了Self%指标高于 1%的呼叫的Self时间分布。
自下而上的树
自下而上的窗格还列出了按Self指标降序排列的已执行活动。与Top Calls窗格不同，Bottom-up窗格仅显示Total%指标高于 2 的活动以及调用它们的函数。
对于每个活动，都会显示其执行时间（以滴答为单位）和Of Parent指标。
对于每个函数调用，WebStorm 会显示定义函数的文件名、行和列。
自上而下的树
自上而下的窗格显示整个调用层次结构，其中作为执行入口点的函数显示在顶部。对于每个活动，都会显示其Total、Total%、Self和Self%指标。对于每个函数调用，WebStorm 会显示定义函数的文件名、行和列。
浏览调用树
要导航到函数的源代码，请选择该函数并按工具栏上的F4或或从上下文菜单中
选择跳转到源代码。要切换到另一个窗格并从另一个角度检查呼叫，请选择呼叫并单击
工具栏上的 或从呼叫的上下文菜单中选择导航至，然后选择目标。WebStorm 切换到选定的窗格并将焦点移到呼叫上。
展开或折叠节点
当 WebStorm 打开分析会话的选项卡时，默认情况下它会扩展调用最多的节点。在探索树时，您可能希望折叠其中一些节点或展开其他节点。
要展开或折叠节点，请从其上下文菜单中选择展开节点或折叠节点。
要折叠活动窗格中的所有节点，请单击
工具栏上的 。要恢复原始树表示，请单击
。
过滤掉轻量级呼叫
执行此操作以仅查看实际导致性能问题的调用。
单击
工具栏上的 ，然后使用滑块指定要显示的呼叫的最小Total%或Parent%值，然后单击Done。
保存和比较分析数据
要保存包含函数及其度量的行，请从函数的上下文菜单中选择复制。如果您想要比较来自两个会话的函数的测量值，这可能会很有帮助，例如，在您对代码进行了一些改进之后。
要仅保存函数名称和定义它的文件的名称，请从函数的上下文菜单中选择复制调用。
要将项目与剪贴板的内容进行比较，请从项目的上下文菜单中选择与剪贴板比较。WebStorm 打开差异查看器。
要将当前日志与另一个隔离物进行比较，请单击
工具栏上的。在打开的对话框中，选择要与当前隔离比较的隔离。要缩小搜索范围，请指定目标隔离是在当前隔离之前还是之后进行的。
导出调用树
要将当前窗格中的调用树保存到文本文件，请单击
工具栏并在打开的对话框中指定目标文件。
分析火焰图
使用多色火焰图查找应用程序暂停的位置并探索引起这些暂停的调用。
该图表由四个区域组成：
上部区域显示了带有两个滑块的时间线，以限制要调查的片段的开始和结束。
底部区域以多色图表的形式显示了一堆调用。第一次调用时，每个函数都被分配一个随机颜色，因此在当前会话中对该函数的每次调用都以这种颜色显示。
中间区域显示来自垃圾收集器、引擎、外部调用和执行本身的调用摘要。为这些活动保留的颜色列在该区域的顶部。
右侧窗格列出了选定片段中的调用，对于每个调用，列表显示其持续时间、被调用函数的名称以及定义函数的文件。
底部和右侧区域是同步的：当您通过时间线拖动底部区域中的滑块时，右侧窗格中的焦点将移动到每个时刻执行的呼叫。
此外，如果您单击底部区域的呼叫，滑块会自动移动到该呼叫，右侧窗格中的焦点会切换到相应的功能，如有必要，列表会自动滚动。反之亦然，如果您单击列表中的某个项目，WebStorm 会在底部区域选择相应的调用并自动将滑块拖动到它：
在时间轴中选择片段
要探索某个时间段内的流程，需要在时间轴中选择相应的片段。为此，请拖动滑块或单击两个滑块之间的窗口并将其拖动到所需的片段。
无论哪种情况，下面的多色图表都显示了所选片段中的调用堆栈。
要放大图表，请单击所选片段，然后单击
工具栏上的 。WebStorm 会打开一个新选项卡并显示放大的选定片段以适合选项卡宽度，以便您可以查看更多详细信息的片段。
浏览火焰图
从右侧区域的调用中，您可以跳转到被调用函数的源代码、工具窗口的其他窗格以及火焰图中具有特定指标的区域。
要跳转到被调用函数的源代码，请从调用的上下文菜单中选择跳转到源代码。
要将火焰图放大到具有呼叫特定指标的片段，请选择呼叫并从呼叫的上下文菜单中单击
或选择导航至，然后选择指标。您还可以导航到调用的堆栈跟踪以查看和分析异常。为此，请从调用的上下文菜单中选择Show As Stack Trace 。WebStorm 在单独的选项卡中打开堆栈跟踪，要返回到Flame Chart窗格，请单击底部的V8 CPU Profiling工具窗口按钮。
内存分析
内存分析让您可以检测内存泄漏和动态内存问题并定位导致它们的代码片段。
启用内存分析
要在应用程序启动时调用内存快照，您需要在Node.js运行配置中指定其他设置。
从主菜单中，选择。或者，从工具栏上的列表中选择编辑配置。单击工具栏上的 并从列表中
选择Node.js。从列表中，选择Node.js运行配置以激活 CPU 分析或创建新配置，如创建 Node.js 运行/调试配置中所述。
切换到V8 Profiling选项卡，然后选中Allow Making heap snapshots复选框。
收集内存分析信息
从主工具栏上的列表中选择运行配置，然后单击
或选择从主菜单在应用程序执行期间的任何时候，单击运行工具窗口
的工具栏。在打开的对话框中，指定快照的名称以及将存储快照的文件夹的路径。要立即开始分析快照，请选中打开快照复选框。
分析内存快照
当您拍摄快照并选择对其进行分析时，WebStorm 会打开带有收集到的数据的V8 Heap工具窗口。如果窗口已经打开并显示为另一个会话收集的数据，WebStorm 会打开一个新选项卡。
要打开和分析一些以前保存的内存分析数据，请转到（或按Ctrl+Shift+A，开始输入，然后从列表中V8选择分析 V8 堆快照。
然后选择相关的.heapsnapshot文件。WebStorm 使用所选文件的名称创建一个单独的选项卡。
该工具窗口具有三个选项卡，显示从不同角度收集的信息。
Containment选项卡显示应用程序中的对象，这些对象分组在几个顶级条目下：DOMWindow objects、Native browser objects和GC Roots，它们是垃圾收集器实际使用的根。有关详细信息，请参阅遏制视图。
对于每个对象，选项卡显示其与 GC 根的距离，即对象与 GC 根之间的最短简单节点路径、对象的浅层大小和对象的保留大小。除了对象大小的绝对值外，WebStorm 还显示对象占用的内存百分比。
最大对象选项卡显示按保留大小排序的最消耗内存的对象。在此选项卡中，您可以发现由于在某个全局对象中累积数据而引发的内存泄漏。
摘要选项卡显示应用程序中按类型分组的对象。该选项卡显示每种类型的对象数量、它们的大小以及它们占用的内存百分比。该信息可能是记忆状态的线索。
每个选项卡都有一个详细信息窗格，其中显示了从 GC 根到当前选定对象的路径以及对象的保持器列表，即保持与选定对象的链接的对象。每个堆快照都有许多“反向”引用和循环，因此每个对象总是有许多保留器。
用文本标签标记对象
标签可帮助您区分对象并在不丢失上下文的情况下从一个对象移动到另一个对象。
要为对象设置标签，请选择对象并单击工具栏上的 或从上下文菜单中
选择标记。然后在打开的对话框中指定文本标签。
浏览快照
要导航到与对象对应的函数或变量，请选择该对象并单击工具栏上的 或从上下文菜单中
选择编辑源。如果按钮和菜单选项被禁用，这意味着 WebStorm 没有找到任何与所选对象对应的函数或变量。如果找到多个函数或变量，WebStorm 会将它们显示在建议列表中。
为了帮助您从包含的角度调查对象并专注于对象之间的链接，WebStorm 允许您从“最大对象”或“摘要”选项卡或“发生”视图中的对象跳转到“包含”选项卡中的同一对象。
为此，请选择对象并单击
工具栏上的 或从上下文菜单中选择在主树中导航。
搜索快照
在“遏制”选项卡中，单击
工具栏上的 。在打开的V8 堆搜索对话框中，指定搜索模式和要搜索的范围。可用范围包括：
无处不在：选中此复选框可在所有范围内搜索。选中此复选框后，将禁用所有其他搜索类型。
链接名称：选中此复选框可在V8调用C++ 运行时创建的对象名称中进行搜索。
在V8 Heap工具窗口中，链接名称用
%字符标记%<link name>。类名：选中此复选框可在函数构造函数中进行搜索。
文本字符串：选中此复选框可在对象内容中执行文本搜索。
快照对象 ID：选中此复选框可在对象的唯一标识符中进行搜索。V8在创建对象时为每个对象分配格式中的这种唯一标识符，并保留它直到对象被销毁。这意味着您可以在同一会话中拍摄的多个快照中找到并比较相同的对象。
在V8 Heap工具窗口中，对象 ID 用
@字符标记@<object id>。标记：
选中此复选框可通过单击“包含”选项卡的工具栏手动搜索您为对象设置的标签。
搜索结果显示在详细信息窗格中，在单独的“<搜索模式>”视图中出现。要按您指定的搜索范围分组显示搜索结果，请按工具栏上的按类型分组切换按钮。
下次打开对话框时，它将显示上一次搜索的设置。