哈洛!我是 DevTools 的技術文件作者 Kayce。我想在這份開發人員工具摘要中,稍微調整了設定,並且針對最近幾個 Chrome 版本,對開發人員工具進行一些效能改善工具的改善項目。
除非另有註明,否則所有功能均已位於 Chrome 穩定版。
適用於行動優先環境的 CPU 節流
適用於 Chrome 54,目前為 Canary 版。
軟體對世界造成衝擊,行動裝置正在吃軟體。開發人員工具正持續演進,更貼近行動優先的開發世界的需求。開發人員工具的行動優先工具最近開發了 CPU 節流功能。您可以運用這項功能,進一步瞭解網站在資源受限裝置上的表現。
從時間軸面板的「CPU Throttling」下拉式選單中選取任一選項,即可降低開發機器的運算能力。
![ALT_TEXT_HERE](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/alttexthere-4d2a07a478acb.png?authuser=19&hl=zh-tw)
CPU 節流的相關注意事項:
- 節流會立即生效,直到您停用為止,就像網路節流一樣。
- 透過這項功能,你可以大致瞭解網站在資源受限裝置上的效能。開發人員工具無法真正模擬行動裝置系統的效能特性。
- 節流與開發機器相關。換句話說,在配備五年前的筆電上進行 5 倍節流,獲得的結果與使用 5 倍放送速度的筆電不同。
也就是說,結合 CPU 節流功能、網路節流和裝置模式,您就能直接透過開發機器瀏覽器的便利性,更瞭解網站在行動裝置上的呈現方式和效能。
在時間軸錄製內容中的網路檢視畫面
下次執行時間軸記錄時,勾選「網路」核取方塊,即可分析頁面下載資源的方式。按一下資源,即可在「摘要」窗格中查看該資源的詳細資訊。
![時間軸中的網路檢視畫面](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/network-view-timeline-b37a7ed4d8b.png?authuser=19&hl=zh-tw)
摘要中的「Initiator」欄位特別有用。這個欄位會顯示要求資源的位置。
被動事件監聽器
被動事件監聽器是新興標準,可提升捲動效能。請閱讀真正的本篇報導,進一步瞭解相關資訊:
開發人員工具推出了幾項功能,可協助你找到可能因 {passive: true}
濃度愛意而受益的聽眾。
首先,當同步事件監聽器會在不合理的時間內封鎖頁面捲動時,控制台會發出警告。
![同步事件監聽器警告](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/synchronous-listener-warn-0e6fbc2a7bf36.png?authuser=19&hl=zh-tw)
您可以在下方示範中自行測試:
接下來,您可以使用「事件監聽器」窗格中的小下拉式選單,篩選被動或封鎖事件監聽器。
![被動事件監聽器篩選器](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/passive-listeners-filter-dec2e483dc09.png?authuser=19&hl=zh-tw)
最後,如要切換事件監聽器的被動或封鎖狀態,請將滑鼠遊標懸停在事件監聽器上,然後按下「Toggle Passive」。這項功能目前只適用於 touchstart
、touchmove
、mousewheel
和 wheel
事件監聽器。
![切換被動式](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/toggle-passive-5b52cd4553b19.png?authuser=19&hl=zh-tw)
我來總結一下這部分來總結這個部分勾選轉譯導覽匣中的「捲動效能問題」核取方塊,即可以視覺化方式呈現潛在的捲動問題。如果畫面上醒目顯示了某個部分,表示該區段與網頁的該區段繫結,可能對捲動效能造成負面影響。
![捲動效能問題示範](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/scrolling-performance-iss-b5baa74fac517.gif?authuser=19&hl=zh-tw)
依活動分組
回到 6 月中旬,時間軸面板的「Call Tree」窗格新增了「依活動分組」類別。這個分組可讓您查看網頁剖析 HTML、評估指令碼和繪畫等所花費的時間。
![依活動分組](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/group-activity-28e0f3f6c9ebf.png?authuser=19&hl=zh-tw)
來源面板中的時間軸統計資料
建議您啟用「JS 設定檔」選項建立時間軸記錄,以便在「來源」面板中查看依功能細分的執行時間。
![來源面板中的時間軸統計資料](https://developer.chrome.google.cn/static/blog/devtools-digest-2016-09/image/timeline-stats-sources-p-d1443a034c712.png?authuser=19&hl=zh-tw)
分享你的觀點
與往常一樣,我們很樂意聆聽您對開發人員工具的任何意見回饋或想法。
- 如有簡短的問題或意見,或想分享新的想法,請在 Twitter 上透過 ChromeDevTools 傳送。
- 如果討論時間較長,郵寄清單或 Stack Overflow 會是最合適的選擇。
- 如需任何文件相關文件,請前往我們的文件存放區開啟問題。
下個月見!