JetBrains WebStorm2020提供代碼編輯功能，可以幫助用戶更快設(shè)計(jì)新的應(yīng)用程序，軟件具有智能代碼輔助、調(diào)試、跟蹤和測(cè)試等功能，在編輯代碼以后可以在軟件立即運(yùn)行測(cè)試方案，可以借助重構(gòu)功能修改代碼，可以部署應(yīng)用程序結(jié)構(gòu)，由于JetBrains WebStorm2020軟件是英文界面，部分用戶使用起來可能比較復(fù)雜，所以小編推薦WebStorm2020漢化補(bǔ)丁，使用補(bǔ)丁就可以將軟件界面修改為中文，從而在熟悉的界面工作！

新版特色

　　1、更改提交流程

　　為了簡(jiǎn)化提交流程，我們開發(fā)了一個(gè)新的提交工具窗口，用于處理所有與提交相關(guān)的任務(wù)。 默認(rèn)情況下為所有新安裝啟用。 如果您是現(xiàn)有用戶，則會(huì)在模式提交對(duì)話框中看到提示，使您可以快速切換到新的 UI。

　　2、更優(yōu)美的外觀

　　新的默認(rèn)編輯器字體、更具實(shí)用性的快速文檔、用于專注編碼的 Zen 模式 – 這些以及其他改進(jìn)正在等待您試用！

　　3、Vuex 和 Composition API 支持

　　通過對(duì) Vuex 庫和 Vue 3 中的 Composition API 的開箱即用支持，您可以更加順暢地構(gòu)建出色的 Vue.js 應(yīng)用程序。

　　4、保存時(shí)運(yùn)行 Prettier

　　是否想將 Prettier 設(shè)置為在保存時(shí)運(yùn)行？ 使用新的Run on save for files 選項(xiàng)，不再需要 File Watchers 或第三方插件。

安裝方法

　　1、下載軟件以后點(diǎn)擊WebStorm-2020.1.exe啟動(dòng)安裝

　　2、提示軟件的安裝地址C:\Program Files\JetBrains\WebStorm 2020.1

　　3、顯示快捷方式設(shè)置，勾選64位的運(yùn)行快捷方式

　　4、提示開始菜單名字設(shè)置，默認(rèn)JetBrains

　　5、提示安裝進(jìn)度，等待軟件安裝結(jié)束吧

　　6、JetBrains WebStorm2020已經(jīng)安裝結(jié)束，點(diǎn)擊完成啟動(dòng)軟件

破解方法

　　1、打開JetBrains WebStorm2020軟件顯示引導(dǎo)內(nèi)容，點(diǎn)擊OK

　　2、提示軟件界面風(fēng)格設(shè)置，兩種模式，點(diǎn)擊Skip Remaining and Set Defaults跳過

　　3、提示激活功能，選擇Evaluate for free， Evaluate

　　4、如圖所示，找到你下載的補(bǔ)丁jetbrains-agent-latest.zip，拖動(dòng)到軟件界面就可以彈出安裝

　　5、點(diǎn)擊Restart重啟軟件 安裝破解補(bǔ)丁

　　6、選擇為WebStorm安裝，點(diǎn)擊是，安裝結(jié)束會(huì)重啟軟件

　　7、現(xiàn)在軟件激活成功，將軟件關(guān)閉

　　8、將漢化包resources_zh_CN_WebStorm_2020_r1.jar復(fù)制到安裝地址下“l(fā)ib”文件夾

　　9、打開軟件，軟件界面顯示中文，您可以創(chuàng)建一個(gè)項(xiàng)目或者是打開一個(gè)項(xiàng)目

　　10、這里是項(xiàng)目選址功能，在軟件界面選擇自己需要新建的項(xiàng)目，設(shè)置項(xiàng)目保存地址

　　11、進(jìn)入jetbrains WebStorm 2020軟件界面就可以開始編輯代碼

　　12、可以看到軟件已經(jīng)激活完畢，現(xiàn)在軟件就是免費(fèi)的

官方教程

　　V8 CPU和內(nèi)存性能分析?

　　借助WebStorm，您可以使用V8的基于樣本的探查器來捕獲和分析Node.js應(yīng)用程序的CPU 探查和堆快照。

　　您還可以打開和瀏覽在Google Chrome DevTools中為客戶端代碼捕獲的配置文件和快照。

　　在你開始之前?

　　確保在“ 插件”頁面上啟用了NodeJS捆綁插件 ，有關(guān)詳細(xì)信息，請(qǐng)參閱管理插件。

　　CPU分析?

　　CPU配置文件可幫助您更好地了解代碼的哪些部分占用最多的CPU時(shí)間，以及V8 JavaScript引擎如何執(zhí)行和優(yōu)化代碼。

　　WebStorm中的Node.js CPU配置文件基于V8內(nèi)置CPU探查器，該探查器提供有關(guān)代碼執(zhí)行和JavaScript引擎本身行為的信息，包括垃圾回收周期，編譯和重新編譯以及代碼優(yōu)化。

　　探查器每隔一定時(shí)間間隔拍攝一次快照，稱為“刻度”。測(cè)量不僅針對(duì)代碼的工作，而且還針對(duì)引擎本身執(zhí)行的活動(dòng)，例如編譯，系統(tǒng)庫調(diào)用，優(yōu)化和垃圾回收。

　　啟用CPU分析?

　　要在應(yīng)用程序啟動(dòng)時(shí)調(diào)用V8 CPU分析，您需要在Node.js運(yùn)行配置中指定其他設(shè)置。

　　從主菜單中，選擇運(yùn)行| 編輯配置。 單擊+工具欄上的，然后從列表中 選擇Node.js。

　　從列表中，選擇Node.js運(yùn)行配置以激活CPU性能分析或創(chuàng)建新配置，如運(yùn)行和調(diào)試Node.js中所述。

　　切換到“ V8分析”選項(xiàng)卡，然后選擇“ 記錄CPU分析信息”復(fù)選框。在日志文件夾字段中，指定將存儲(chǔ)記錄的日志的文件夾的路徑，日志文件名為 isolate-。

　　收集CPU分析信息?

　　從主工具欄上的列表中選擇運(yùn)行配置，然后單擊運(yùn)行按鈕或選擇“運(yùn)行” |“運(yùn)行”。從主菜單運(yùn)行<配置名稱>。當(dāng)執(zhí)行需要分析的方案時(shí)，請(qǐng)單擊工具欄上的停止，以停止該過程 。

　　分析CPU分析日志?

　　停止應(yīng)用程序時(shí)，WebStorm會(huì)自動(dòng)打開 V8分析工具窗口并在其中顯示收集的分析數(shù)據(jù)。 如果該窗口已經(jīng)打開并顯示為另一個(gè)會(huì)話收集的數(shù)據(jù)，則WebStorm將打開一個(gè)新選項(xiàng)卡。自動(dòng)打開的選項(xiàng)卡以控制應(yīng)用程序執(zhí)行和收集性能分析數(shù)據(jù)的運(yùn)行配置命名。

　　要打開并分析一些以前保存的性能分析數(shù)據(jù)，請(qǐng)轉(zhuǎn)到“ 工具” |“工具”。V8分析-分析V8分析日志 并選擇相關(guān)的V8日志文件isolate-。WebStorm使用所選日志文件的名稱創(chuàng)建一個(gè)單獨(dú)的選項(xiàng)卡。

　　基于收集的概要分析數(shù)據(jù)，WebStorm構(gòu)建三個(gè)調(diào)用樹，并在單獨(dú)的窗格中顯示它們。使用這些調(diào)用樹，您可以從兩種不同的角度分析應(yīng)用程序的執(zhí)行情況：一方面，哪些調(diào)用很耗時(shí)（“繁重”），另一方面，“誰調(diào)用了誰”。

　　了解調(diào)用樹中的指標(biāo)

　　調(diào)用樹使用Total和Self度量標(biāo)準(zhǔn)，這些度量標(biāo)準(zhǔn)顯示函數(shù)中的滴答聲數(shù)量或其與總執(zhí)行時(shí)間的比率：

　　總計(jì)顯示了一個(gè)函數(shù)及其調(diào)用的函數(shù)花費(fèi)了多少時(shí)間。

　　Self顯示僅在函數(shù)本身內(nèi)部花費(fèi)了多少時(shí)間，而沒有考慮其子節(jié)點(diǎn)。

　　所述的親本度量示出的函數(shù)調(diào)用它的函數(shù)（的執(zhí)行時(shí)間的純執(zhí)行時(shí)間的比率父）。

　　V8優(yōu)化器

　　在某些情況下，V8可以優(yōu)化您的代碼，有關(guān)詳細(xì)信息 ，請(qǐng)參閱針對(duì)V8優(yōu)化。

　　*函數(shù)名稱前的 星號(hào)表示該函數(shù)已被優(yōu)化。

　　波浪號(hào)~表示該功能可能需要優(yōu)化，但由于某些原因尚未優(yōu)化。如果代碼運(yùn)行時(shí)間短，引擎可能會(huì)推遲優(yōu)化或跳過優(yōu)化，但是代字號(hào)指向可以重寫代碼以獲得更好性能的位置。

　　熱門來電樹

　　“ 頂部呼叫”窗格按“ 自我”指標(biāo)排序的降序列出了已執(zhí)行的活動(dòng)。對(duì)于每個(gè)活動(dòng)，都會(huì)顯示其Total，Total％和Self％指標(biāo)。 對(duì)于每個(gè)函數(shù)調(diào)用，WebStorm都會(huì)顯示文件名，行和定義函數(shù)的列。

　　“ 概述”窗格中的圖顯示了“ 自身百分比”指標(biāo)高于1％的呼叫的“ 自身時(shí)間” 分布。

　　自下而上的樹

　　在自下而上的，如果你遇到一個(gè)樹是有幫助的重功能，想找出它是從調(diào)用。

　　“ 自下而上”窗格還列出了按“ 自我”指標(biāo)按降序排序的已執(zhí)行活動(dòng)。與“ 頂部調(diào)用”窗格不同，“ 底部向上”窗格僅顯示“ 總百分比”指標(biāo)大于2 的活動(dòng)以及調(diào)用它們的函數(shù)。

　　對(duì)于每個(gè)活動(dòng)，將顯示其執(zhí)行時(shí)間（以滴答為單位）和“父項(xiàng)”指標(biāo)。

　　對(duì)于每個(gè)函數(shù)調(diào)用，WebStorm都會(huì)顯示文件名，行和定義函數(shù)的列。

　　自上而下的樹

　　“ 自上而下”窗格顯示了整個(gè)調(diào)用層次結(jié)構(gòu)，并在頂部顯示了作為執(zhí)行入口點(diǎn)的功能。對(duì)于每個(gè)活動(dòng)，都會(huì)顯示其Total，Total％，Self和Self％指標(biāo)。 對(duì)于每個(gè)函數(shù)調(diào)用，WebStorm都會(huì)顯示文件名，行和定義函數(shù)的列。

　　瀏覽呼叫樹?

　　導(dǎo)航到函數(shù)的源代碼，選擇此功能并按下工具欄上的或選擇跳轉(zhuǎn)到源從上下文菜單。要切換到另一個(gè)窗格并從另一個(gè)角度檢查呼叫，請(qǐng)選擇該呼叫并單擊 工具欄上的，或者從該呼叫的上下文菜單中選擇“ 導(dǎo)航到 ”，然后選擇目的地。WebStorm切換到所選窗格，然后將焦點(diǎn)移至呼叫。

　　展開或折疊節(jié)點(diǎn)?

　　WebStorm打開用于概要分析會(huì)話的選項(xiàng)卡時(shí)，默認(rèn)情況下，它將展開具有最重調(diào)用的節(jié)點(diǎn)。在瀏覽樹木時(shí)，您可能想折疊其中一些節(jié)點(diǎn)或擴(kuò)展其他節(jié)點(diǎn)。

　　要展開或折疊節(jié)點(diǎn)，請(qǐng)從其上下文菜單中選擇“ 展開節(jié)點(diǎn)”或“ 折疊節(jié)點(diǎn)”。

　　要折疊活動(dòng)窗格中的所有節(jié)點(diǎn)，請(qǐng)單擊工具欄上的。要恢復(fù)原始的樹狀顯示，請(qǐng)單擊過濾掉來電?

　　這樣做只能查看實(shí)際上導(dǎo)致性能問題的呼叫。

　　單擊工具欄上的，然后使用滑塊為要顯示的呼叫指定最小的Total％或Parent％值，然后單擊完成。

　　保存并比較分析數(shù)據(jù)?

　　要保存包含函數(shù)及其度量的行，請(qǐng)從函數(shù)的上下文菜單中選擇“ 復(fù)制 ”。如果要比較兩個(gè)會(huì)話中某個(gè)函數(shù)的度量值（例如，在對(duì)代碼進(jìn)行一些改進(jìn)之后），這可能會(huì)有所幫助。

　　要僅保存函數(shù)名稱和定義文件的名稱，請(qǐng)從函數(shù)的上下文菜單中選擇“ 復(fù)制調(diào)用 ”。

　　要將項(xiàng)目與剪貼板的內(nèi)容進(jìn)行比較，請(qǐng)從項(xiàng)目的上下文菜單中選擇“ 與剪貼板比較 ”。WebStorm打開差異查看器。

　　要將當(dāng)前日志與另一個(gè)隔離進(jìn)行比較，請(qǐng)單擊工具欄上的。在打開的對(duì)話框中，選擇要與之進(jìn)行比較的隔離物。要縮小搜索范圍，請(qǐng)指定目標(biāo)隔離是在當(dāng)前隔離之前還是之后進(jìn)行的。

　　導(dǎo)出調(diào)用樹?

　　要將當(dāng)前窗格中的調(diào)用樹保存到文本文件，請(qǐng)單擊工具欄上的，然后 在打開的對(duì)話框中指定目標(biāo)文件。

　　分析火焰圖

　　使用多色火焰圖查找應(yīng)用程序在哪里暫停，并探究導(dǎo)致這些暫停的呼叫。

　　該圖表包含四個(gè)區(qū)域：

　　上方區(qū)域顯示了一個(gè)時(shí)間軸，其中包含兩個(gè)滑塊，用于限制要研究的片段的開始和結(jié)束。

　　底部區(qū)域以多色圖表的形式顯示一堆調(diào)用。首次調(diào)用時(shí)，每個(gè)函數(shù)都分配有一個(gè)隨機(jī)的顏色，因此在當(dāng)前會(huì)話中此函數(shù)的每次調(diào)用都以該顏色顯示。

　　中間區(qū)域顯示了來自垃圾收集器的調(diào)用摘要，引擎，外部調(diào)用以及執(zhí)行本身。這些活動(dòng)保留的顏色在該區(qū)域的頂部列出。

　　右側(cè)窗格列出了選定片段中的調(diào)用，對(duì)于每個(gè)調(diào)用，列表均顯示其持續(xù)時(shí)間，被調(diào)用函數(shù)的名稱以及定義該函數(shù)的文件。

　　底部和右側(cè)區(qū)域是同步的：隨著時(shí)間線在底部區(qū)域中拖動(dòng)滑塊，右側(cè)窗格中的焦點(diǎn)將移至每個(gè)時(shí)刻執(zhí)行的呼叫。

　　此外，如果單擊底部區(qū)域中的呼叫，則滑塊會(huì)自動(dòng)移至該呼叫，并且右側(cè)窗格中的焦點(diǎn)會(huì)切換到相應(yīng)的功能，必要時(shí)列表會(huì)自動(dòng)滾動(dòng)。反之亦然，如果您單擊列表中的一個(gè)項(xiàng)目，WebStorm會(huì)在底部區(qū)域中選擇相應(yīng)的呼叫并將滑塊自動(dòng)拖動(dòng)到該呼叫：

　　在時(shí)間軸中選擇片段?

　　要在一定時(shí)間內(nèi)探索流程，需要在時(shí)間軸中選擇相應(yīng)的片段。為此，請(qǐng)拖動(dòng)滑塊或單擊兩個(gè)滑塊之間的窗口，然后將其拖動(dòng)到所需的片段。

　　無論哪種情況，下面的多色圖表都會(huì)顯示所選片段內(nèi)的調(diào)用堆棧。

　　要放大圖表，請(qǐng)單擊選定的片段，然后在工具欄上單擊。WebStorm將打開一個(gè)新選項(xiàng)卡，并放大顯示所選的片段以適合選項(xiàng)卡的寬度，以便您可以檢查該片段的更多詳細(xì)信息。

　　瀏覽火焰圖表?

　　從右側(cè)區(qū)域中的調(diào)用，您可以跳至被調(diào)用函數(shù)的源代碼，工具窗口的其他窗格以及具有特定指標(biāo)的明火圖表中的區(qū)域。

　　要跳轉(zhuǎn)到被調(diào)用函數(shù)的源代碼，請(qǐng)從調(diào)用的上下文菜單中選擇“ 跳轉(zhuǎn)到源代碼 ”。

　　要使火焰圖放大帶有特定呼叫指標(biāo)的片段，請(qǐng)選擇該呼叫，然后單擊或從呼叫的上下文菜單中選擇“ 導(dǎo)航到 ”，然后選擇指標(biāo)。

　　您還可以導(dǎo)航到調(diào)用的堆棧跟蹤以查看和分析異常。為此，請(qǐng)從調(diào)用的上下文菜單中選擇“ 顯示為堆棧跟蹤 ”。WebStorm在單獨(dú)的選項(xiàng)卡中打開堆棧跟蹤，要返回“ 火焰圖”窗格，請(qǐng)單擊底部的V8 CPU分析工具窗口按鈕。

　　內(nèi)存分析?

　　內(nèi)存概要分析使您可以檢測(cè)內(nèi)存泄漏和動(dòng)態(tài)內(nèi)存問題，并找到導(dǎo)致它們的代碼片段。

　　啟用內(nèi)存分析?

　　要在應(yīng)用程序啟動(dòng)時(shí)調(diào)用獲取內(nèi)存快照，您需要在Node.js運(yùn)行配置中指定其他設(shè)置。

　　從主菜單中，選擇運(yùn)行| 編輯配置。 單擊工具欄上的，然后從列表中 選擇Node.js。

　　從列表中，選擇Node.js運(yùn)行配置以激活CPU性能分析或按照運(yùn)行和調(diào)試Node.js中所述創(chuàng)建新配置。

　　切換到“ V8分析”選項(xiàng)卡，然后選擇“ 允許拍攝堆快照”復(fù)選框。

　　收集內(nèi)存分析信息?

　　從主工具欄上的列表中選擇運(yùn)行配置，然后單擊或選擇“運(yùn)行” |“運(yùn)行”。從主菜單運(yùn)行<配置名稱>。在應(yīng)用程序執(zhí)行期間的任何時(shí)間，單擊 “ 運(yùn)行工具”窗口的工具欄。

　　在打開的對(duì)話框中，指定快照的名稱以及存儲(chǔ)快照的文件夾的路徑。要立即開始分析快照，請(qǐng)選中“ 打開快照”復(fù)選框。

　　分析內(nèi)存快照?

　　拍攝快照并選擇分析快照時(shí)，WebStorm會(huì)打開V8 Heap工具窗口，其中包含收集的數(shù)據(jù)。 如果該窗口已經(jīng)打開并顯示為另一個(gè)會(huì)話收集的數(shù)據(jù)，則WebStorm將打開一個(gè)新選項(xiàng)卡。

　　要打開并分析一些以前保存的內(nèi)存配置文件數(shù)據(jù)，請(qǐng)轉(zhuǎn)至工具| V8分析-分析V8堆快照 并選擇相關(guān)的.heapsnapshot文件。WebStorm使用所選文件的名稱創(chuàng)建一個(gè)單獨(dú)的選項(xiàng)卡。

　　工具窗口具有三個(gè)選項(xiàng)卡，這些選項(xiàng)卡顯示了從不同角度收集的信息。

　　在遏制選項(xiàng)卡顯示在您的應(yīng)用程序中的對(duì)象在幾個(gè)頂級(jí)條目歸類：DOMWindow對(duì)象， 原生瀏覽器的對(duì)象，以及 GC根，這是根的垃圾收集器實(shí)際使用。有關(guān)詳細(xì)信息，請(qǐng)參見收容視圖。

　　對(duì)于每個(gè)對(duì)象，該選項(xiàng)卡顯示其距GC根的距離，即距離對(duì)象與GC根之間的節(jié)點(diǎn)的最短簡(jiǎn)單路徑，對(duì)象的淺層大小 以及對(duì)象的保留大小。除了對(duì)象大小的絕對(duì)值之外，WebStorm還會(huì)顯示對(duì)象占用的內(nèi)存百分比。

　　“ 最大對(duì)象”選項(xiàng)卡顯示了按其保留大小排序的最消耗內(nèi)存的對(duì)象。在此選項(xiàng)卡中，您可以發(fā)現(xiàn)由于在某些全局對(duì)象中累積數(shù)據(jù)而引起的內(nèi)存泄漏。

　　“ 摘要”選項(xiàng)卡按類型將應(yīng)用程序中的對(duì)象分組。該選項(xiàng)卡顯示每種類型的對(duì)象數(shù)，它們的大小以及它們所占內(nèi)存的百分比。此信息可能是內(nèi)存狀態(tài)的線索。

　　每個(gè)選項(xiàng)卡都有一個(gè)“ 詳細(xì)信息”窗格，該窗格顯示從GC根目錄到當(dāng)前所選對(duì)象的路徑，以及對(duì)象保持器（即保留指向所選對(duì)象鏈接的對(duì)象）列表。每個(gè)堆快照都有許多“后退”引用和循環(huán)，因此每個(gè)對(duì)象始終有許多保留器。

　　用文本標(biāo)簽標(biāo)記對(duì)象?

　　標(biāo)簽可幫助您區(qū)分對(duì)象并在不丟失上下文的情況下從一個(gè)對(duì)象移到另一個(gè)對(duì)象。

　　要為對(duì)象設(shè)置標(biāo)簽，請(qǐng)選擇對(duì)象，然后單擊工具欄上的√，或從上下文菜單中選擇“ 標(biāo)記 ”。然后在打開的對(duì)話框中指定文本標(biāo)簽。

　　瀏覽快照?

　　要導(dǎo)航到與對(duì)象相對(duì)應(yīng)的函數(shù)或變量，請(qǐng)選擇該對(duì)象，然后單擊工具欄上的編輯，或從上下文菜單中選擇“ 編輯源代碼 ”。如果禁用了按鈕和菜單選項(xiàng)，則意味著WebStorm找不到與所選對(duì)象相對(duì)應(yīng)的任何函數(shù)或變量。

　　如果找到了幾個(gè)函數(shù)或變量，WebStorm會(huì)在建議列表中顯示它們。

　　為了幫助您調(diào)查的對(duì)象之間的聯(lián)系，但從精礦圍堵點(diǎn)對(duì)象，WebStorm讓您從一個(gè)對(duì)象跳的最大對(duì)象或摘要選項(xiàng)卡或紀(jì)錄以期在同一個(gè)對(duì)象遏制標(biāo)簽。

　　為此，請(qǐng)選擇對(duì)象，然后單擊工具欄上的，或者從上下文菜單中選擇“ 在主樹中導(dǎo)航”。

　　搜索快照?

　　在“ 遏制”選項(xiàng)卡中，單擊工具欄上的。

　　在打開的V8堆搜索對(duì)話框中，指定搜索模式和要搜索的范圍。可用范圍是：

　　到處：選中此復(fù)選框以在所有范圍內(nèi)搜索。選中此復(fù)選框后，將禁用所有其他搜索類型。

　　鏈接名稱：選中此復(fù)選框可在V8調(diào)用C ++運(yùn)行時(shí)時(shí)創(chuàng)建的對(duì)象名稱中搜索。

　　在 V8堆工具窗口中，鏈接名稱用%字符標(biāo)記%。

　　類名：選擇此復(fù)選框可在函數(shù)構(gòu)造器中搜索。

　　文本字符串：選中此復(fù)選框可以在對(duì)象的內(nèi)容中執(zhí)行文本搜索。

　　快照對(duì)象ID：選中此復(fù)選框可在對(duì)象的唯一標(biāo)識(shí)符中搜索。 創(chuàng)建對(duì)象時(shí)，V8會(huì)以格式將這種唯一標(biāo)識(shí)符分配給每個(gè)對(duì)象，并保留它直到對(duì)象被銷毀為止。這意味著您可以在同一會(huì)話內(nèi)拍攝的多個(gè)快照中找到并比較相同的對(duì)象。

　　在 V8堆工具窗口中，對(duì)象ID用@字符標(biāo)記@