淺談 Firefox 45 開發者工具

動畫、記憶體工具,還有更多

Firefox 45 現已進入 Firefox 開發者 (Developer) 版本,其開發者工具可追蹤記憶體用量、檢視 CSS 動畫,還有更多功能。本文將重點說明某些變化,當然還是要你自己下載最新的開發者版本並親身體驗。

CSS 動畫工具

animation-thumb

 

動畫工具又添增更多功能了:

  • 只要在時間軸上點擊動畫,就會看到動畫屬性列表,再加上 keyframes 顯示隨著時間所變化的數值。如果動畫變化太快讓你來不及觀察,也可以變更播放速率以放慢動畫速度。
  • 在合成器執行緒 (Compositor thread) 上執行的動畫,其旁將出現閃電圖示,代表:即便網頁其他部分顯示緩慢,但這類動畫仍將順暢執行

 

另可欣賞 Patrick Brosset 所錄製〈Using the Dev Tools to understand CSS〉系列最新影片,進一步了解該如何使用動畫工具

除了動畫工具之外,檢測器 (Inspector) 的搜尋功能亦有所改善,現可找出頁面中包含頁框內所有標籤的結果。

到底是什麼吃了大量記憶體?

我們改良了記憶體用量檢視方式,能更有效率的找出是哪個部分在耗用記憶體。透過快照比對差異的方式,即可檢視 heap 內容中發生的變化。另外可用快照篩選來顯示特定檔案或函式所佔用的記憶體;或可僅顯示特定 [[class]] 的物件。

進一步參閱有關記憶體工具以及記憶體工具入門說明文件。我們另整理出一組 gif 檔案帶你了解差異比對過程

其他小改動

我們另繼續強化工具箱並修復相關錯誤,以下是部分重點提示。

 

主控台 (Console)

如果你正在使用 WeakMap 與 WeakSet 物件,現在可在主控台中看到其內容項目。

weakset-500x192

 

另外,由 Service Workers 產生的記錄,現在預設在受控的分頁中顯示。改善 Service Worker 的除錯經驗仍有很大的空間,可追蹤此臭蟲的進度進一步了解。

 

網路監測器 (Network Monitor)

  • 只要在網路時間軸中啟動了DOMContentLoaded與載入事件,就會看到對應的標記。
  • 現可根據字串比對來篩選檔案名稱。只要在字串前方加上「-」就可以大幅縮減清單上所列的請求數量。

console-500x199

 

另外要感謝 Albert Juhé 與 Tim Nguyen 兩位貢獻者,協助打造監測器的表格 UI 更貼近工具箱的風格。

當然,立刻免費下載 Firefox 開發者版本以體驗更多強化之處吧!

 

 

原文連結:Developer Edition 45 – Animations, Memory Tools and More

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

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