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

Kayce Basques

歡迎回來！Chrome 64 版開發人員工具即將推出以下新功能：

• 效能監視器。即時查看網頁成效。
• 主控台側欄。減少控制台的干擾，專注於重要訊息。
• 將類似的控制台訊息分組。主控台現在預設會將類似訊息分組。

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

監控成效

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

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

如果使用者回報應用程式執行緩慢或不穩，請查看效能監控器，找出可能原因。

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

如要使用「效能監視器」，請按照下列步驟操作：

1. 開啟指令選單。

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

   圖 1. 效能監控工具

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

相關功能：

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

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

主控台側欄

在大型網站上，主控台可能會迅速充斥不相關的訊息。使用新的控制台側欄，減少干擾並專注於重要訊息。

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

主控台側欄預設為隱藏。按一下「顯示主控台側欄」 即可顯示。

相關功能：

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

將類似的控制台訊息分組

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

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

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

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

取消勾選「將類似項目歸為一組」核取方塊，即可停用這項功能。

相關功能：

• 您可以使用 console.group() 將自己的控制台訊息分組。

本機覆寫

真的很抱歉！我們原先預計在 Chrome 64 中推出這項功能，但為了修正一些問題，因此在截止期限前取消了這項計畫。顯然「最新消息」使用者介面未及時更新。很抱歉！

這項功能將在 Chrome 65 中推出，Chrome 65 大約會在 Chrome 64 推出後 6 週發布。詳情請參閱「本機覆寫」。如果您使用 Windows 或 Mac，可以下載 Chrome Canary 版，立即試用 Chrome 65。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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