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

Jecelyn Yeen

全新 CSS 格狀偵錯工具

開發人員工具現已改善 CSS 網格偵錯功能！

CSS 格線偵錯

如果網頁上的 HTML 元素套用 display: grid 或 display: inline-grid， 在「元素」面板中看到 grid 標記。按一下徽章即可切換顯示畫面 畫面中的格狀重疊。

新的「Layout」窗格提供「Grid」區段，提供多種檢視選項 網格。

詳情請參閱說明文件。

Chromium 問題：1047356

新增 WebAuthn 分頁

您現在可以使用新的 WebAuthn 模擬驗證器，並對 Web Authentication API 進行偵錯 分頁。

選取「更多選項」>更多工具 >WebAuthn：開啟「WebAuthn」分頁。

WebAuthn 分頁

在新的「WebAuthn」WebAuthn分頁之前，Chrome 並未提供原生 WebAuthn 偵錯支援。 開發人員需要實體驗證者，才能使用 Web Authentication API 測試網頁應用程式。

有了新的「WebAuthn」WebAuthn分頁，網頁程式開發人員就能模擬這些驗證器，並自訂 和檢查狀態，完全不需要實體驗證器。如此一來 偵錯作業會更加輕鬆

請參閱我們的說明文件，進一步瞭解 WebAuthn 功能。

Chromium 問題：1034663

在頂端和底部面板之間移動工具

開發人員工具現可支援開發人員工具中的頂端和底部面板之間移動工具。這樣一來 最多可同時查看兩種工具

舉例來說，如要一次查看「元素」和「來源」面板，可以直接向右查看 請點選「來源」面板，然後選取「移至底部」，即可將該面板移至底部。

移至底部

同樣地，您也可以將任何底部分頁移至最上方，在分頁標籤上按一下滑鼠右鍵，然後選取「移至」 。

移至頂端

Chromium 問題：1075732

「元素」面板更新

在「Styles」窗格中查看「Computed」側欄窗格

您現在可以在「樣式」窗格中切換「運算側欄」窗格。

「Styles」窗格中的「Computedside」窗格預設為收合狀態。點選這個按鈕 開啟/關閉 Chrome 瀏覽器

運算側欄窗格

Chromium 問題：1073899

在「Computed」窗格中將 CSS 屬性分組

您現在可以在「Computed」窗格中，依類別將 CSS 屬性分組。

透過這項新的分組功能，您可以更輕鬆地瀏覽「Computed」窗格 (更少 捲動頁面)，並選擇性地聚焦於一組用於 CSS 檢查的相關屬性。

在「元素」面板中選取元素。切換「群組」核取方塊，將 CSS 進行分組/取消分組 資源。

將 CSS 屬性分組

Chromium 問題：1096230、1084673、1106251

Lighthouse 面板中的 6.4 燈塔

「Lighthouse」面板現在正在執行 Lighthouse 6.4。查看版本資訊查看完整的 變更清單

燈塔

Lighthouse 6.4 中的全新稽核項目：

  • 預先載入字型。驗證所有使用 font-display: optional 的字型是否已預先載入。
  • 有效的來源對應。稽核網頁是否包含適用於大型第一方 JavaScript 的有效來源對應。
  • [實驗功能] 大型 JavaScript 程式庫。大型 JavaScript 程式庫可能會導致效能不佳 才需進行這項稽核建議相較於常見的大型 JavaScript 程式庫，提出成本較低的替代方案。 moment.js。

Chromium 問題：772558

「時間」部分中的 performance.mark() 個事件

效能記錄的「時機」部分現在會標示 performance.mark() 事件。

Performance.mark 事件

「網路」面板中新增「resource-type」和「url」篩選器

使用網路面板中的新 resource-type 和 url 關鍵字來篩選網路要求。

舉例來說，使用 resource-type:image 即可專注於為圖片的網路要求。

資源類型篩選器

查看資源篩選請求，找出更多特殊關鍵字 (例如 resource-type) 和 url。

Chromium 問題：1121141、1104188

影格詳細資料檢視畫面更新

顯示 COEP 和 COOP reporting to 端點

您現在可以查看跨來源嵌入程式政策 (COEP) 和跨來源開啟工具政策 (COOP)reporting to端點下的安全性與隔離一節。

Reporting API 會定義新的 HTTP 標頭 Report-To，可讓網頁開發人員 指定要讓瀏覽器傳送警告和錯誤的伺服器端點。

回報給端點

請參閱這篇文章，進一步瞭解如何啟用 COEP 和 COOP 並建立網站 「已跨來源隔離」。

Chromium 問題：1051466

顯示 COEP 和 COOP report-only 模式

開發人員工具現在會顯示 COEP 和 COOP 設為 report-only 模式的 report-only 標籤。

報表專用標籤

請觀看這部影片，瞭解如何防範資訊外洩，以及如何啟用 COOP 和 COEP 你的網站

Chromium 問題：1051466

淘汰「更多工具」選單中的 Settings

「更多工具」選單中的 Settings 已淘汰。從主要面板中開啟「設定」 。

主要面板中的設定

Chromium 問題：1121312

實驗功能

在「CSS 總覽」面板中查看及修正色彩對比問題

「CSS 總覽」面板現在會列出網頁的低色彩對比文字清單。

在這個範例中，示範頁面含有低色彩對比問題。點選問題即可 查看有問題的元素清單。

低色彩對比問題

按一下清單中的元素，即可在「元素」面板中開啟元素。開發人員工具提供自動功能 色彩建議：協助你修正低對比文字。

Chromium 問題：1120316

在開發人員工具中自訂鍵盤快速鍵

現在可以在開發人員工具中自訂常用指令的鍵盤快速鍵。

前往「設定」>快速鍵：將滑鼠遊標懸停在指令上，然後按一下「編輯」按鈕 (鉛筆圖示) 即可自訂鍵盤快速鍵。

自訂鍵盤快速鍵

如要重設所有捷徑，請按一下「還原預設捷徑」。

Chromium 問題：174309

下載預覽頻道

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

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

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

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

開發人員工具新功能

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