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

Kayce Basques

歡迎回來！開發人員工具在 Chrome 64 版本中加入的功能包括：

請繼續閱讀，或觀看下方版本資訊。

監控成效

使用成效監控器，即時查看網頁載入、 執行階段效能，其中包括：

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

如果使用者回報應用程式運作速度緩慢或卡頓情形，請查看效能監控器，瞭解 線索

效能為何如此重要：BookMyShow 利用自家解決方案，將轉換量提升了 80% 著重速度的漸進式網頁應用程式。瞭解詳情。

使用 Performance Monitor：

  1. 開啟「指令選單」。

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

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

  3. 按一下指標，即可顯示或隱藏該項目。在圖 1 中，CPU 用量、JS 堆積大小和JS 事件接聽程式圖表。

相關功能：

  • 「Performance」面板：逐步瀏覽關鍵使用者歷程，並將發生在 其中包含 JavaScript 活動、網路要求、CPU 使用率等等。以下情況也可能是 用於分析負載效能瞭解詳情。
  • 「Audits」(稽核) 面板。針對任何網址執行一系列自動化負載和執行階段效能測試。 瞭解詳情。

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

控制台側欄

在大型網站上，控制台可能因為不相關的訊息而迅速發生爆炸。使用新版管理中心 側欄可減少雜訊，讓您專心處理重要郵件。

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

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

根據預設，系統會隱藏控制台側欄。按一下「顯示控制台側欄」。 顯示控制台側欄 以便顯示。

相關功能：

  • 篩選器文字方塊。請輸入一些文字，Console 只會顯示含有該字詞的訊息 文字。此外，這項功能也支援規則運算式模式、排除篩選器和網址篩選器。

將控制台中的類似訊息分組

控制台現在預設會將相似的訊息分成一組。例如，圖 3 中有一個 訊息 [Violation] Avoid using document.write() 的執行個體。

主控台示例：將類似訊息歸類為一組

圖 3. 主控台示例：將類似訊息歸類為一組

按一下群組即可展開該群組，並查看訊息的各個例項。

展開的控制台訊息範例

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

取消勾選「Group Similar」(分組相似群組) 核取方塊，即可停用這項功能。

相關功能：

本機覆寫

真的很抱歉！我們最初是安排在 Chrome 64 中推出這項功能，但隨後將它拉接近 才有助於消除粗糙的邊緣問題。很明顯地，「What's New UI」並未在 讓應用程式從可以最快做出回應的位置 回應使用者要求很抱歉！

這項功能將在 Chrome 65 推出，預計於 Chrome 64 推出約 6 週後才會正式上線。確認 本機覆寫的詳細資訊。如果你使用的是 Windows 或 Mac，現在可以試試 Chrome 65， 下載 Chrome Canary。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。