Firefox 的新記憶體工具

剛釋出的 Firefox 44 版本 (亦為 Developer 開發者版本) 內含全新記憶體工具,可協助你了解 Web App 對記憶體的使用\保留情形。這對許多欲專精行動 Web 或資源有限的開發者特別有用。Mozilla 法國社群成員 Baptiste Kaenel 另錄製了一段影片,要向大家說明此強大的新功能。

記憶體 (Memory) 工具即是對記憶體中的所有細節拍下快照,再透過不同的群組設定呈現為樹狀\表格形式。相關內容是以預設的「coarse type」所分組,可能分為以下 4 種分類之一:

  • Objects即 JavaScript 物件。可依照各物件的內部 [[Class]] 名稱進一步分組。
  • Scripts:由 Web App 所載入的 JavaScript 原始碼,及由 SpiderMonkey 的 JIT 編碼器「IonMonkey」所產生的可執行機器碼。
  • Strings:由 Web App 所使用的 JavaScript 字串。
  • Other:不符合以上分類的其他結構。

你也可以使用「object class」或「internal type」,即分別依照 JavaScript 的 [[Object]] 與 C++ 類型名稱進行分組。後者最常為 Firefox 平台開發者所用。

但最有趣的應該是第四種,也是最後一種分類選項的「allocation stack」。你必須先到「記憶體」面板上方勾選「記錄配置堆疊 (record allocation stacks)」方塊,才能啟動此選項。勾選此方塊之後,雖然整個追蹤配置作業可能拖慢 App 的效能,但因為此檢視選項會按照 JavaScript 程式碼中的資源位置,將 Heap 中的物件予以分類,所以頗值得犧牲一點效能。與其他分組不同的是,此檢視模式會將記憶體中的項目連結至其來源程式碼。

memory-tool

快照清單也包含該快照內的總記憶體容量。你可多照幾張快照以利自己了解 App 的記憶體使用量的變化。

要想進一步了解新的記憶體工具,可參閱 MDN 上的記憶體工具說明文件。當然也別忘了我們需要大家的意見!立刻下載 Firefox 開發者 (Developer) 版本。隨時留言或到 Twitter 上透過 @FirefoxDevTools 讓我們知道你想要的工具或改善之處。

 

 

原文連結:Firefox’s New Memory Tool

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: 淺談 Firefox 50 開發者工具 | 部落格 | Mozilla Taiwan

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *