JetBrains
WebStorm2020提供代码编辑功能，可以帮助用户更快设计新的应用程序，软件具有智能代码辅助、调试、跟踪和测试等功能，在编辑代码以后可以在软件立即运行测试方案，可以借助重构功能修改代码，可以部署应用程序结构，由于JetBrains
WebStorm2020软件是英文界面，部分用户使用起来可能比较复杂，所以小编推荐WebStorm2020汉化补丁，使用补丁就可以将软件界面修改为中文，从而在熟悉的界面工作！
新版特色
1、更改提交流程
为了简化提交流程，我们开发了一个新的提交工具窗口，用于处理所有与提交相关的任务。 默认情况下为所有新安装启用。 如果您是现有用户，则会在模式提交对话框中看到提示，使您可以快速切换到新的 UI。
2、更优美的外观
新的默认编辑器字体、更具实用性的快速文档、用于专注编码的 Zen 模式 – 这些以及其他改进正在等待您试用！
3、Vuex 和 Composition API 支持
通过对 Vuex 库和 Vue 3 中的 Composition API 的开箱即用支持，您可以更加顺畅地构建出色的 Vue.js 应用程序。
4、保存时运行 Prettier
是否想将 Prettier 设置为在保存时运行？ 使用新的Run on save for files 选项，不再需要 File Watchers 或第三方插件。
安装方法
1、下载软件以后点击WebStorm-2020.1.exe启动安装
2、提示软件的安装地址C:\Program Files\JetBrains\WebStorm 2020.1
3、显示快捷方式设置，勾选64位的运行快捷方式
4、提示开始菜单名字设置，默认JetBrains
5、提示安装进度，等待软件安装结束吧
6、JetBrains WebStorm2020已经安装结束，点击完成启动软件
破解方法
1、打开JetBrains WebStorm2020软件显示引导内容，点击OK
2、提示软件界面风格设置，两种模式，点击Skip Remaining and Set Defaults跳过
3、提示激活功能，选择Evaluate for free， Evaluate
4、如图所示，找到你下载的补丁jetbrains-agent-latest.zip，拖动到软件界面就可以弹出安装
5、点击Restart重启软件 安装破解补丁
6、选择为WebStorm安装，点击是，安装结束会重启软件
7、现在软件激活成功，将软件关闭
8、将汉化包resources_zh_CN_WebStorm_2020_r1.jar复制到安装地址下“lib”文件夹
9、打开软件，软件界面显示中文，您可以创建一个项目或者是打开一个项目
10、这里是项目选址功能，在软件界面选择自己需要新建的项目，设置项目保存地址
11、进入jetbrains WebStorm 2020软件界面就可以开始编辑代码
12、可以看到软件已经激活完毕，现在软件就是免费的
官方教程
V8 CPU和内存性能分析
借助WebStorm，您可以使用V8的基于样本的探查器来捕获和分析Node.js应用程序的CPU 探查和堆快照。
您还可以打开和浏览在Google Chrome DevTools中为客户端代码捕获的配置文件和快照。
在你开始之前
确保在“ 插件”页面上启用了NodeJS捆绑插件 ，有关详细信息，请参阅管理插件。
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分析”选项卡，然后选择“ 记录CPU分析信息”复选框。在日志文件夹字段中，指定将存储记录的日志的文件夹的路径，日志文件名为 isolate-。
收集CPU分析信息
从主工具栏上的列表中选择运行配置，然后单击运行按钮或选择“运行” |“运行”。从主菜单运行<配置名称>。当执行需要分析的方案时，请单击工具栏上的停止，以停止该过程 。
分析CPU分析日志
停止应用程序时，WebStorm会自动打开 V8分析工具窗口并在其中显示收集的分析数据。 如果该窗口已经打开并显示为另一个会话收集的数据，则WebStorm将打开一个新选项卡。自动打开的选项卡以控制应用程序执行和收集性能分析数据的运行配置命名。
要打开并分析一些以前保存的性能分析数据，请转到“ 工具” |“工具”。V8分析-分析V8分析日志 并选择相关的V8日志文件isolate-。WebStorm使用所选日志文件的名称创建一个单独的选项卡。
基于收集的概要分析数据，WebStorm构建三个调用树，并在单独的窗格中显示它们。使用这些调用树，您可以从两种不同的角度分析应用程序的执行情况：一方面，哪些调用很耗时（“繁重”），另一方面，“谁调用了谁”。
了解调用树中的指标
调用树使用Total和Self度量标准，这些度量标准显示函数中的滴答声数量或其与总执行时间的比率：
总计显示了一个函数及其调用的函数花费了多少时间。
Self显示仅在函数本身内部花费了多少时间，而没有考虑其子节点。
所述的亲本度量示出的函数调用它的函数（的执行时间的纯执行时间的比率父）。
V8优化器
在某些情况下，V8可以优化您的代码，有关详细信息 ，请参阅针对V8优化。
*函数名称前的 星号表示该函数已被优化。
波浪号~表示该功能可能需要优化，但由于某些原因尚未优化。如果代码运行时间短，引擎可能会推迟优化或跳过优化，但是代字号指向可以重写代码以获得更好性能的位置。
热门来电树
“ 顶部呼叫”窗格按“ 自我”指标排序的降序列出了已执行的活动。对于每个活动，都会显示其Total，Total％和Self％指标。 对于每个函数调用，WebStorm都会显示文件名，行和定义函数的列。
“ 概述”窗格中的图显示了“ 自身百分比”指标高于1％的呼叫的“ 自身时间” 分布。
自下而上的树
在自下而上的，如果你遇到一个树是有帮助的重功能，想找出它是从调用。
“ 自下而上”窗格还列出了按“ 自我”指标按降序排序的已执行活动。与“ 顶部调用”窗格不同，“ 底部向上”窗格仅显示“ 总百分比”指标大于2 的活动以及调用它们的函数。
对于每个活动，将显示其执行时间（以滴答为单位）和“父项”指标。
对于每个函数调用，WebStorm都会显示文件名，行和定义函数的列。
自上而下的树
“ 自上而下”窗格显示了整个调用层次结构，并在顶部显示了作为执行入口点的功能。对于每个活动，都会显示其Total，Total％，Self和Self％指标。 对于每个函数调用，WebStorm都会显示文件名，行和定义函数的列。
浏览呼叫树
导航到函数的源代码，选择此功能并按下工具栏上的或选择跳转到源从上下文菜单。要切换到另一个窗格并从另一个角度检查呼叫，请选择该呼叫并单击 工具栏上的，或者从该呼叫的上下文菜单中选择“ 导航到 ”，然后选择目的地。WebStorm切换到所选窗格，然后将焦点移至呼叫。
展开或折叠节点
WebStorm打开用于概要分析会话的选项卡时，默认情况下，它将展开具有最重调用的节点。在浏览树木时，您可能想折叠其中一些节点或扩展其他节点。
要展开或折叠节点，请从其上下文菜单中选择“ 展开节点”或“ 折叠节点”。
要折叠活动窗格中的所有节点，请单击工具栏上的。要恢复原始的树状显示，请单击过滤掉来电
这样做只能查看实际上导致性能问题的呼叫。
单击工具栏上的，然后使用滑块为要显示的呼叫指定最小的Total％或Parent％值，然后单击完成。
保存并比较分析数据
要保存包含函数及其度量的行，请从函数的上下文菜单中选择“ 复制 ”。如果要比较两个会话中某个函数的度量值（例如，在对代码进行一些改进之后），这可能会有所帮助。
要仅保存函数名称和定义文件的名称，请从函数的上下文菜单中选择“ 复制调用 ”。
要将项目与剪贴板的内容进行比较，请从项目的上下文菜单中选择“ 与剪贴板比较 ”。WebStorm打开差异查看器。
要将当前日志与另一个隔离进行比较，请单击工具栏上的。在打开的对话框中，选择要与之进行比较的隔离物。要缩小搜索范围，请指定目标隔离是在当前隔离之前还是之后进行的。
导出调用树
要将当前窗格中的调用树保存到文本文件，请单击工具栏上的，然后 在打开的对话框中指定目标文件。
分析火焰图
使用多色火焰图查找应用程序在哪里暂停，并探究导致这些暂停的呼叫。
该图表包含四个区域：
上方区域显示了一个时间轴，其中包含两个滑块，用于限制要研究的片段的开始和结束。
底部区域以多色图表的形式显示一堆调用。首次调用时，每个函数都分配有一个随机的颜色，因此在当前会话中此函数的每次调用都以该颜色显示。
中间区域显示了来自垃圾收集器的调用摘要，引擎，外部调用以及执行本身。这些活动保留的颜色在该区域的顶部列出。
右侧窗格列出了选定片段中的调用，对于每个调用，列表均显示其持续时间，被调用函数的名称以及定义该函数的文件。
底部和右侧区域是同步的：随着时间线在底部区域中拖动滑块，右侧窗格中的焦点将移至每个时刻执行的呼叫。
此外，如果单击底部区域中的呼叫，则滑块会自动移至该呼叫，并且右侧窗格中的焦点会切换到相应的功能，必要时列表会自动滚动。反之亦然，如果您单击列表中的一个项目，WebStorm会在底部区域中选择相应的呼叫并将滑块自动拖动到该呼叫：
在时间轴中选择片段
要在一定时间内探索流程，需要在时间轴中选择相应的片段。为此，请拖动滑块或单击两个滑块之间的窗口，然后将其拖动到所需的片段。
无论哪种情况，下面的多色图表都会显示所选片段内的调用堆栈。
要放大图表，请单击选定的片段，然后在工具栏上单击。WebStorm将打开一个新选项卡，并放大显示所选的片段以适合选项卡的宽度，以便您可以检查该片段的更多详细信息。
浏览火焰图表
从右侧区域中的调用，您可以跳至被调用函数的源代码，工具窗口的其他窗格以及具有特定指标的明火图表中的区域。
要跳转到被调用函数的源代码，请从调用的上下文菜单中选择“ 跳转到源代码 ”。
要使火焰图放大带有特定呼叫指标的片段，请选择该呼叫，然后单击或从呼叫的上下文菜单中选择“ 导航到 ”，然后选择指标。
您还可以导航到调用的堆栈跟踪以查看和分析异常。为此，请从调用的上下文菜单中选择“ 显示为堆栈跟踪 ”。WebStorm在单独的选项卡中打开堆栈跟踪，要返回“ 火焰图”窗格，请单击底部的V8 CPU分析工具窗口按钮。
内存分析
内存概要分析使您可以检测内存泄漏和动态内存问题，并找到导致它们的代码片段。
启用内存分析
要在应用程序启动时调用获取内存快照，您需要在Node.js运行配置中指定其他设置。
从主菜单中，选择运行| 编辑配置。 单击工具栏上的，然后从列表中 选择Node.js。
从列表中，选择Node.js运行配置以激活CPU性能分析或按照运行和调试Node.js中所述创建新配置。
切换到“ V8分析”选项卡，然后选择“ 允许拍摄堆快照”复选框。
收集内存分析信息
从主工具栏上的列表中选择运行配置，然后单击或选择“运行” |“运行”。从主菜单运行<配置名称>。在应用程序执行期间的任何时间，单击 “ 运行工具”窗口的工具栏。
在打开的对话框中，指定快照的名称以及存储快照的文件夹的路径。要立即开始分析快照，请选中“ 打开快照”复选框。
分析内存快照
拍摄快照并选择分析快照时，WebStorm会打开V8 Heap工具窗口，其中包含收集的数据。 如果该窗口已经打开并显示为另一个会话收集的数据，则WebStorm将打开一个新选项卡。
要打开并分析一些以前保存的内存配置文件数据，请转至工具| V8分析-分析V8堆快照 并选择相关的.heapsnapshot文件。WebStorm使用所选文件的名称创建一个单独的选项卡。
工具窗口具有三个选项卡，这些选项卡显示了从不同角度收集的信息。
在遏制选项卡显示在您的应用程序中的对象在几个顶级条目归类：DOMWindow对象， 原生浏览器的对象，以及 GC根，这是根的垃圾收集器实际使用。有关详细信息，请参见收容视图。
对于每个对象，该选项卡显示其距GC根的距离，即距离对象与GC根之间的节点的最短简单路径，对象的浅层大小 以及对象的保留大小。除了对象大小的绝对值之外，WebStorm还会显示对象占用的内存百分比。
“ 最大对象”选项卡显示了按其保留大小排序的最消耗内存的对象。在此选项卡中，您可以发现由于在某些全局对象中累积数据而引起的内存泄漏。
“ 摘要”选项卡按类型将应用程序中的对象分组。该选项卡显示每种类型的对象数，它们的大小以及它们所占内存的百分比。此信息可能是内存状态的线索。
每个选项卡都有一个“ 详细信息”窗格，该窗格显示从GC根目录到当前所选对象的路径，以及对象保持器（即保留指向所选对象链接的对象）列表。每个堆快照都有许多“后退”引用和循环，因此每个对象始终有许多保留器。
用文本标签标记对象
标签可帮助您区分对象并在不丢失上下文的情况下从一个对象移到另一个对象。
要为对象设置标签，请选择对象，然后单击工具栏上的√，或从上下文菜单中选择“ 标记 ”。然后在打开的对话框中指定文本标签。
浏览快照
要导航到与对象相对应的函数或变量，请选择该对象，然后单击工具栏上的编辑，或从上下文菜单中选择“ 编辑源代码 ”。如果禁用了按钮和菜单选项，则意味着WebStorm找不到与所选对象相对应的任何函数或变量。
如果找到了几个函数或变量，WebStorm会在建议列表中显示它们。
为了帮助您调查的对象之间的联系，但从精矿围堵点对象，WebStorm让您从一个对象跳的最大对象或摘要选项卡或纪录以期在同一个对象遏制标签。
为此，请选择对象，然后单击工具栏上的，或者从上下文菜单中选择“ 在主树中导航”。
搜索快照
在“ 遏制”选项卡中，单击工具栏上的。
在打开的V8堆搜索对话框中，指定搜索模式和要搜索的范围。可用范围是：
到处：选中此复选框以在所有范围内搜索。选中此复选框后，将禁用所有其他搜索类型。
链接名称：选中此复选框可在V8调用C ++运行时时创建的对象名称中搜索。
在 V8堆工具窗口中，链接名称用%字符标记%。
类名：选择此复选框可在函数构造器中搜索。
文本字符串：选中此复选框可以在对象的内容中执行文本搜索。
快照对象ID：选中此复选框可在对象的唯一标识符中搜索。 创建对象时，V8会以格式将这种唯一标识符分配给每个对象，并保留它直到对象被销毁为止。这意味着您可以在同一会话内拍摄的多个快照中找到并比较相同的对象。
在 V8堆工具窗口中，对象ID用@字符标记@
∨ 展开