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

Kayce Basques

歡迎回來！Chrome 64 版開發人員工具的新功能包括：

請繼續閱讀，或觀看下方的發布說明影片。

監控成效

使用效能監控器，即可即時查看網頁載入或執行階段效能的各個面向，包括：

  • CPU 用量。
  • JavaScript 堆積大小。
  • 網頁上的 DOM 節點、JavaScript 事件監聽器、文件和框架總數。
  • 每秒重新計算的版面配置和樣式數量。

如果使用者回報應用程式速度緩慢或不流暢，請查看效能監視器，找出問題所在。

載入效能的重要性：BookMyShow 建構以速度為重點的漸進式網頁應用程式後，轉換量增加了 80%。瞭解詳情。

如要使用效能監控工具：

  1. 開啟指令選單。

  2. 開始輸入 Performance，然後選取 Show Performance Monitor。

    效能監控工具 圖 1。效能監控工具

  3. 按一下指標即可顯示或隱藏指標。圖 1 顯示「CPU 使用率」、「JS 堆積大小」和「JS 事件監聽器」圖表。

相關功能：

  • 「Performance」面板。逐步瀏覽重要使用者歷程，並記錄網頁上發生的所有事件，包括 JavaScript 活動、網路要求、CPU 用量等等。也可用於分析載入效能。瞭解詳情。
  • 「稽核」面板。針對任何網址執行一系列自動負載和執行階段效能測試。瞭解詳情。

如果您剛開始分析成效，建議您先使用「稽核」面板，然後再進一步使用「成效」面板或「成效」監控器。

主控台側欄

在大型網站上，主控台可能會很快就被不相關的訊息淹沒。使用全新的 管理中心側欄，減少雜訊，專注於您重要的訊息。

使用控制台側欄只顯示錯誤訊息

圖 2. 使用控制台側欄只顯示錯誤訊息

根據預設，主控台側欄會隱藏。按一下「顯示主控台側欄」圖示 顯示主控台側欄 即可顯示。

相關功能：

  • 篩選文字方塊。輸入文字後，控制台只會顯示包含該文字的訊息。也支援規則運算式模式、負面篩選器和網址篩選器。

將類似的控制台訊息分組

控制台現在會根據預設將類似的訊息分組。舉例來說，在圖 3 中，訊息 [Violation] Avoid using document.write() 有 27 個例項。

主控台將類似訊息分組的範例

圖 3. 主控台將類似訊息分組的範例

按一下群組展開，即可查看每個訊息例項。

展開的控制台訊息群組範例

圖 4. 展開的控制台訊息群組範例

取消勾選「Group Similar」核取方塊即可停用這項功能。

相關功能：

本機覆寫

真的很抱歉！我們原本預計在 Chrome 64 中推出這項功能，但為了盡量減少不順暢的情況，我們將推出時間延後至截止日附近。顯然，「最新消息」UI 並未及時更新。很抱歉！

這項功能會在 Chrome 65 中推出，大約在 Chrome 64 推出後 6 週。詳情請參閱「區域覆寫值」。如果你使用 Windows 或 Mac，可以下載 Chrome Canary，立即試用 Chrome 65。

下載預覽管道

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

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

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

開發人員工具的新功能

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