What's 開發人員工具的新功能 (Chrome 61)

Kayce Basques

Chrome 61 版開發人員工具的新功能和重大變更包括：

請觀看下方影片，瞭解這些發布說明的內容，或繼續閱讀本文。

在裝置模式中模擬低階和中階行動裝置

系統現在會預設顯示「裝置模式」調節選單，讓您只要點選幾下滑鼠，即可模擬低階或中階行動裝置。

節流選單

圖 1. 節流選單

節流選單定義

圖 2. 將滑鼠游標懸停在「Throttling」選單上，或開啟「Capture Settings」選單，查看「Mid-tier mobile」和「Low-end mobile」的定義

查看儲存空間用量

「應用程式」面板的「清除儲存空間」分頁中新增的「用量」部分，會顯示來源使用了多少儲存空間，以及這個裝置上來源的最大配額。

「用量」部分

圖 3. 「用量」部分顯示 https://airhorner.com 使用了來源配額 15214 MB 中的 66.9 KB

查看服務工作者快取回應的時間

「快取儲存空間」分頁中的新「快取時間」欄會顯示服務工作程式快取回應的時間。

「快取時間」欄

圖 4. 「快取時間」欄

透過指令選單啟用 FPS 計量器

您現在可以透過指令選單啟用FPS 計量器。

透過指令選單啟用 FPS 計量器

圖 5：透過指令選單啟用 FPS 計量器

設定滑鼠滾輪行為，以便在效能錄製期間縮放或捲動

開啟「設定」，然後設定新的「火焰圖滑鼠滾輪動作」設定，以便變更滑鼠滾輪在「效能」面板中的行為。

舉例來說，如果在錄影的「Main」部分使用滑鼠滾輪，或是在觸控板上用兩指滑動，預設行為是放大或縮小畫面。將設定變更為「Scroll」後，這項手勢現在會向上或向下捲動。

「頁框圖的滑鼠滾輪動作」設定

圖 6. Flamechart 滑鼠滾輪動作設定

支援 ES6 模組的偵錯功能

ES6 模組已在 Chrome 61 中原生提供。除了偵錯功能正常運作之外，DevTools 並沒有太多動作。請嘗試設定一些中斷點，並逐步執行 Paul Irish 的 ES6 模組實作，瞭解 TodoMVC 的運作方式。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。