開發人員工具摘要:匯總的時間軸詳細資料、調色盤等

Paul Bakaus
Paul Bakaus

本月 Chrome Canary 推出了許多功能。請繼續閱讀,瞭解哪些第三方指令碼會導致網站發生效能問題,以及如何透過時間軸中的匯總詳細資料新的色版選擇一致的顏色、如何使用可自訂的網路設定檔模擬會議 WiFi,以及如何透過新的主選單更優質的工具提示,充分運用 DevTools UI。


更精確地歸咎效能問題:在「時間軸」中匯總詳細資料

時間軸中的匯總詳細資料

在現今的網站上,我們使用越來越多的第三方信標、分析、社群媒體、字型載入和廣告服務,有時甚至過多。為避免發生這種情況,並讓您瞭解問題所在,我們在時間軸中推出了匯總詳細資料。

在「Aggregated Details」分頁中,您可以專注於耗用大量資源的函式或整個呼叫樹狀圖,然後依網域、子網域或不同網址細分所選資料。舉例來說,在上述網頁載入時間軸中,您現在可以輕鬆將速度變慢歸因於來自 facebook.net 或 twitter.com 等網域的第三方指令碼。

全新專屬主選單

新的主選單。

為了讓主要工具列保持整潔,我們將抽屜、設定和固定圖示移至新的專屬主選單。

尤其是連接至電腦的程序變得更加簡單。每個停靠位置都有專屬圖示,因此不必長按上一個圖示。

除了固定功能外,我們也新增了快速存取檔案搜尋、捷徑和說明 (可前往新的首頁)。

透過改良的工具提示探索開發人員工具

新的工具提示。

開發人員工具中有很多按鈕,我們知道其中並非所有按鈕都會自動顯示說明。我們現在已將系統原生工具提示文字,換成與平台一致的自訂工具提示文字,讓使用者更容易發掘動作和相關捷徑。

新的工具提示會更快顯示,並包含鍵盤快速鍵 (如果有)。

建立自訂網路節流設定檔

自訂網路設定檔。

如果網路節流器的預設選項對您的用途限制太多,而您需要「會議 WiFi」選項,或者想懷舊,想以傳統方式模擬 「110 波特」線路,那麼我有好消息要告訴您。我們新增了「設定」面板,可讓您執行上述任何操作。

自動、Material Design 和自訂調色盤

無論您想重現魔法般的色彩,還是使用現有的調色盤,改良版的 Colorpicker 都能協助您為網站挑選一致的調色盤。

按一下色盤旁邊的小型切換器圖示,即可選擇下列任一選項:

  1. 網頁顏色:這個調色盤會根據我們在 CSS 中找到的顏色自動產生,因此如果要擴充現有網站,這是不錯的選擇。
  2. Material DesignMaterial Design 調色盤提供多種美麗的顏色,是開始新專案時的理想選擇。目前你可以找到所有原色,但我們很快就會推出所有色調。
  3. 自訂:這是您專屬的遊樂場。在挑選器中選取顏色,然後按一下調色盤旁的「加號」圖示,即可新增顏色。拖曳即可重新排序,按一下滑鼠右鍵即可顯示更多選項,例如移除。

提供寶貴意見,協助我們進一步擴展色彩故事。

其他最佳

  • 使用 fetch() API 提出的要求現在會顯示在網路面板中
  • 自動面板版面配置可確保在您調整 DevTools
    面板大小時,面板會配合新的空間限制調整大小。
  • 「檢查元素與裝置模式」有一系列新的圖示。
  • DOM 面板中的屬性現在會以不同顏色標示,即使節點已醒目顯示也一樣。(之前都是白色)。
  • 隱藏元素 (在所選 DOM 節點上按下「h」即可啟用) 現在會在左側顯示灰色圓圈指標,DOM 中斷點則會顯示藍色圓圈。(這類似於我們用來強制元素狀態 (例如 :hover) 的橘色指標)。

如往,歡迎透過 Twitter 或下方的留言與我們分享您的想法,並將錯誤提交至 crbug.com/new

下個月見!
Paul Bakaus 和開發人員工具團隊