Chrome 124 將停用 JavaScript 分析器面板。往後請使用「Performance」面板，剖析 Node.js CPU 效能。
為什麼要淘汰 JavaScript 分析器？(JS 分析器)
自 Chrome 58 起，開發人員工具團隊計劃最終淘汰 JS 分析器。原因如下：
- 然而，我們已停止積極開發。但 JS Profiler 經過數年來沒有收到任何重大更新，團隊也沒有資源繼續開發。
- 更流暢的剖析體驗。「效能」面板已用於各種效能分析，且能夠透過 Node.js 剖析 JavaScript CPU 效能，因此將所有項目集中於一處，以提供一致性和效率。
- 效能面板較佳。我們會持續加入新功能和強化功能，進一步改善這項工具，使其成為更強大且容易使用的成效分析工具。
淘汰後該怎麼做？
如要進一步瞭解如何剖析 JavaScript CPU 效能，請參閱「剖析 Node.js 效能」。
以下是「效能」面板的幾個使用訣竅：
- 使用火焰圖找出效能瓶頸。
- 使用「Bottom-up」和「Call Tre」分頁標籤，即可瞭解函式之間的關係。
我們如何因應淘汰作業？
我們開發了原型，並在 GitHub 上公開發布 Request for Comments (RFC)，以徵求開發人員的意見回饋。
此外，我們也會主動聯絡開發人員專家來測試原型設計，處理任何疑慮或問題，確保「效能」面板符合核心剖析需求。
我們會逐步在 4 個階段逐步停用 JS 分析器，讓開發人員有充足的時間適應及採用。
重要問題及修正方法
在我們收到的意見回饋中，最急迫的疑慮主要圍繞以下三個主要問題：
- 支援
.cpuprofile檔案格式。JS 分析器使用不同的檔案格式。「Performance」面板應可支援。 - 載入速度過慢。面板的載入速度似乎很慢，幹擾了剖析程序。
- 缺少 JavaScript VM 選取器。缺少 JavaScript VM 執行個體選取器的某些情況下，剖析能力有限。
我們接下來會逐一說明這些問題，並說明解決方式。
載入速度緩慢
開發人員告訴我們，「Performance」面板載入大型資料檔案的時間過長，甚至會當機。
我們使用開發人員工具分析開發人員工具 (簡稱為「DevTools-on-DevTools」)。我們發現問題並採取了幾項最佳化措施：
- 已將
Set替換為Array資料結構。 - 已移除不必要的
Map資料結構。 - 將遞迴函式重構為疊代函式 (適用於迴圈)，以減少記憶體堆疊用量。
修正這些瓶頸後，大型檔案的載入速度加快了 80%！🎉
進一步瞭解我們在以下網誌文章所得到的內容：效能面板提升 400%。
缺少的 JavaScript VM 選取器
初始原型缺少 JavaScript VM 選取器。開發人員可以藉此深入瞭解特定 VM 執行個體。
我們已將 JavaScript VM 選取器新增至「Performance」面板。畫面上會顯示下拉式清單，列出所有可用的 JavaScript VM 執行個體。當您選取執行個體時，「Performance」面板會載入該特定執行個體的 CPU 設定檔。
支援 cpuprofile 檔案格式
之前「Performance」面板僅支援追蹤檔，這些追蹤檔是含有追蹤事件陣列的 JSON 檔案。
另一方面，JS Profiler 支援的 CPU 設定檔是具有 .cpuprofile 副檔名的檔案，內含 JSON 物件。看起來會像這樣：
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
新的工作流程不應禁止開發人員分析現有的 cpuprofile。因此，「Performance」面板現已支援追蹤檔和 CPU 設定檔。您可以將 cpuprofile 檔案匯入「Performance」(效能) 中，這樣即可正確載入。
我們會在背景使用規則運算式偵測物件結構差異，如果檔案內容開頭為 {"nodes":[，表示這是 CPU 設定檔。否則就是追蹤檔
辨識出內容類型後，我們會據此進行處理。針對追蹤檔，我們會剖析事件並建立時間軸。針對 CPU 設定檔，我們會剖析 JSON 物件並建構火焰圖。
結論
使用「Performance」面板，享受更流暢的剖析體驗，無論是網站和在 Node.js 與 Deno 應用程式中剖析 CPU 效能都沒問題。
如有任何意見或建議，請針對這項錯誤新增註解，或使用以下其中一個選項與我們聯絡。
下載預覽頻道
建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。
與 Chrome 開發人員工具團隊聯絡
請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。
- 歡迎透過 crbug.com 提出建議或意見。
- 使用「更多選項」
> 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。 - 前往 @ChromeDevTools 張貼 Tweet。
- 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。