開發人員工具摘要,2016 年 9 月 - Perf 匯報

哈洛!我是 DevTools 的技術文件作者 Kayce。我想在這份開發人員工具摘要中,稍微調整了設定,並且針對最近幾個 Chrome 版本,對開發人員工具進行一些效能改善工具的改善項目。

除非另有註明,否則所有功能均已位於 Chrome 穩定版。

適用於行動優先環境的 CPU 節流

適用於 Chrome 54,目前為 Canary 版

軟體對世界造成衝擊,行動裝置正在吃軟體。開發人員工具正持續演進,更貼近行動優先的開發世界的需求。開發人員工具的行動優先工具最近開發了 CPU 節流功能。您可以運用這項功能,進一步瞭解網站在資源受限裝置上的表現。

從時間軸面板的「CPU Throttling」下拉式選單中選取任一選項,即可降低開發機器的運算能力。

ALT_TEXT_HERE

CPU 節流的相關注意事項:

  • 節流會立即生效,直到您停用為止,就像網路節流一樣。
  • 透過這項功能,你可以大致瞭解網站在資源受限裝置上的效能。開發人員工具無法真正模擬行動裝置系統的效能特性。
  • 節流與開發機器相關。換句話說,在配備五年前的筆電上進行 5 倍節流,獲得的結果與使用 5 倍放送速度的筆電不同。

也就是說,結合 CPU 節流功能、網路節流裝置模式,您就能直接透過開發機器瀏覽器的便利性,更瞭解網站在行動裝置上的呈現方式和效能。

在時間軸錄製內容中的網路檢視畫面

下次執行時間軸記錄時,勾選「網路」核取方塊,即可分析頁面下載資源的方式。按一下資源,即可在「摘要」窗格中查看該資源的詳細資訊。

時間軸中的網路檢視畫面

摘要中的「Initiator」欄位特別有用。這個欄位會顯示要求資源的位置。

被動事件監聽器

被動事件監聽器是新興標準,可提升捲動效能。請閱讀真正的本篇報導,進一步瞭解相關資訊:

使用被動事件監聽器改善捲動效能

開發人員工具推出了幾項功能,可協助你找到可能因 {passive: true} 濃度愛意而受益的聽眾。

首先,當同步事件監聽器會在不合理的時間內封鎖頁面捲動時,控制台會發出警告。

同步事件監聽器警告

您可以在下方示範中自行測試:

由於觸控/滾輪處理常式示範而造成捲動卡頓

接下來,您可以使用「事件監聽器」窗格中的小下拉式選單,篩選被動或封鎖事件監聽器。

被動事件監聽器篩選器

最後,如要切換事件監聽器的被動或封鎖狀態,請將滑鼠遊標懸停在事件監聽器上,然後按下「Toggle Passive」。這項功能目前只適用於 touchstarttouchmovemousewheelwheel 事件監聽器。

切換被動式

我來總結一下這部分來總結這個部分勾選轉譯導覽匣中的「捲動效能問題」核取方塊,即可以視覺化方式呈現潛在的捲動問題。如果畫面上醒目顯示了某個部分,表示該區段與網頁的該區段繫結,可能對捲動效能造成負面影響。

捲動效能問題示範

依活動分組

回到 6 月中旬,時間軸面板的「Call Tree」窗格新增了「依活動分組」類別。這個分組可讓您查看網頁剖析 HTML、評估指令碼和繪畫等所花費的時間。

依活動分組

來源面板中的時間軸統計資料

建議您啟用「JS 設定檔」選項建立時間軸記錄,以便在「來源」面板中查看依功能細分的執行時間。

來源面板中的時間軸統計資料

分享你的觀點

與往常一樣,我們很樂意聆聽您對開發人員工具的任何意見回饋或想法。

  • 如有簡短的問題或意見,或想分享新的想法,請在 Twitter 上透過 ChromeDevTools 傳送。
  • 如果討論時間較長,郵寄清單Stack Overflow 會是最合適的選擇。
  • 如需任何文件相關文件,請前往我們的文件存放區開啟問題

下個月見!