Hallo! 我是開發人員工具的技術文件撰寫人員 Kayce,這次的開發人員工具摘要,我打算稍微改變一下,並回顧過去幾個 Chrome 版本中,開發人員工具的部分效能工具改善項目。
除非另有說明,否則所有功能都已納入 Chrome 穩定版。
行動優先世界的 CPU 節流
適用於 Chrome 54 (目前為 Canary 版)。
軟體正在吞噬世界,而行動裝置也正在吞噬軟體。為了更能滿足行動裝置優先開發環境的需求,DevTools 會持續進化。開發人員工具的行動優先工具最新功能是 CPU 節流。使用這項功能,即可進一步瞭解網站在資源受限的裝置上執行的情況。
從「時間軸」面板的「CPU 節流」下拉式選單中選取其中一個選項,限制開發機器的運算能力。

關於 CPU 節流的注意事項:
- 節流會立即生效,並持續生效,直到您停用為止,就像網路節流一樣。
- 這項功能可讓您大致瞭解網站在資源受限的裝置上可能的效能。開發人員工具無法真正模擬行動系統單晶片的效能特性。
- 節流是相對於開發機器而言。換句話說,在頂級電腦上執行 5 倍節流作業,與在 5 年前的平價筆電上執行 5 倍節流作業,會產生不同的結果。
不過,您可以將 CPU 節流功能與網路節流和裝置模式結合使用,就能透過開發機器瀏覽器,更清楚瞭解網站在行動裝置上的外觀和效能。
時間軸錄影中的網路檢視畫面
下次錄製時間軸時,請勾選「Network」核取方塊,以便分析網頁下載資源的方式。按一下資源,即可在「摘要」窗格中查看更多資訊。

摘要中的「發起者」欄位特別實用。這個欄位會指出資源的請求位置。
被動事件監聽器
被動事件監聽器是一種新興標準,可改善捲動效能。請參閱我撰寫的這篇文章,瞭解詳情:
開發人員工具已推出幾項功能,協助您找出可透過 {passive: true}
獲得更多愛的聽眾。
首先,當同步事件監聽器阻斷網頁捲動一段不合理的時間時,控制台會發出警告。

您可以透過下方示範自行測試:
接著,您可以使用「Event Listeners」窗格中的小型下拉式選單,篩選被動或封鎖的事件監聽器。

最後,您可以將游標懸停在事件監聽器上,然後按下「Toggle Passive」,切換事件監聽器的被動或封鎖狀態。這項功能目前僅適用於 touchstart
、touchmove
、mousewheel
和 wheel
事件監聽器。

我會在本節結束時提供一些小訣。在「算繪」導覽匣中啟用「捲動效能問題」核取方塊,即可透過視覺化方式呈現潛在的捲動問題。如果網頁的某個部分醒目顯示,表示該部分已繫結至網頁的事件監聽器,可能會對捲動效能造成負面影響。

依活動分組
6 月中旬,時間軸面板的「呼叫樹狀圖」窗格新增了「依活動分組」排序類別。這個分組可讓您查看網頁花費多少時間剖析 HTML、評估指令碼、繪製畫面等。

「來源」面板中的時間軸統計資料
建立啟用「JS 設定檔」選項的時間軸記錄,即可在「來源」面板中查看函式執行時間的細目。

分享你的觀點
一如往常,我們十分歡迎您提供任何與 DevTools 相關的意見或想法。
- 如有簡短的問題或意見回饋,或想分享新想法,請在 Twitter 上與我們聯絡,ChromeDevTools。
- 如需進行較長的討論,建議您使用郵寄清單或 Stack Overflow。
- 如有任何與文件相關的問題,請在 Google 文件存放區提出問題。
下個月見!