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

Kayce Basques

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

• 模擬行動裝置節流。同時設定 CPU 和網路節流，模擬中階或低階行動裝置。
• 儲存空間用量。查看來源使用的儲存空間量，並依技術細分 (IndexedDB、快取、本機、工作階段等)。
• 快取時間戳記。查看服務工作人員快取回應的時間。
• 從指令選單啟用 FPS 計量表。
• 在「效能」面板中變更滑鼠滾輪和觸控板的行為。
• 以原生方式偵錯 ES6 模組。

如要觀看這些版本資訊的影片，請見下方；如要閱讀，請繼續往下。

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

「裝置模式」的「節流」選單現在預設會顯示，只要按幾下滑鼠，就能模擬低階或中階行動裝置。

圖 1. 「節流」選單

圖 2. 將滑鼠游標懸停在「節流」選單上，或開啟「擷取設定」選單，即可查看「中階行動裝置」和「低階行動裝置」的定義。

查看儲存空間用量

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

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

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

「Cache Storage」(快取儲存空間) 分頁中的新「Time Cached」(快取時間) 資料欄會顯示服務工作人員快取回應的時間。

圖 4. 「快取時間」欄

從指令選單啟用 FPS 計量表

您現在可以從指令選單啟用 FPS 計量表。

圖 5：從「指令選單」啟用「每秒影格數計量表」

將滑鼠滾輪行為設為縮放或捲動「效能記錄」

開啟「設定」，並設定新的「火焰圖滑鼠滾輪動作」設定，即可變更滑鼠滾輪在「效能」面板上的行為。

舉例來說，在錄製內容的「主要」部分使用滑鼠滾輪，或在觸控板上以雙指撥動時，預設行為是放大或縮小畫面。將設定變更為「捲動」後，這個手勢就會改為向上或向下滑動。

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

支援 ES6 模組的偵錯作業

Chrome 61 版已原生支援 ES6 模組。就開發人員工具而言，這裡沒什麼好說的，除了偵錯功能如您所預期般運作。請嘗試在 TodoMVC 的 Paul Irish ES6 模組實作中設定一些中斷點，並逐步執行，親自瞭解。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。