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

Jecelyn Yeen

全新 CSS 格線偵錯工具

DevTools 現在提供更完善的 CSS 格線偵錯功能！

CSS 格線偵錯

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，您會在「Elements」面板中看到旁邊有 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

「元素」面板更新

在「樣式」窗格中查看「計算」側欄

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

樣式窗格中的計算側欄預設為收合狀態。按一下按鈕即可切換。

計算側欄窗格

Chromium 問題：1073899

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

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

有了這項全新的群組功能，您就能更輕鬆地瀏覽「Computed」窗格 (減少捲動次數)，並有選擇地專注於一組相關屬性，以便進行 CSS 檢查。

在「Elements」面板中選取元素。切換「Group」核取方塊，即可將 CSS 屬性分組/取消分組。

將 CSS 屬性分組

Chromium 問題：1096230、1084673、1106251

Lighthouse 6.4 在 Lighthouse 面板中

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 模式

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

報表專用標籤

請觀看這部影片，瞭解如何防止資訊外洩，並在網站中啟用 COOP 和 COEP。

Chromium 問題：1051466

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

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

主面板中的設定

Chromium 問題：1121312

實驗功能

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

CSS 總覽面板現在會列出網頁中色彩對比度偏低的文字。

在這個範例中，示範頁面有低色彩對比的問題。按一下問題，即可查看發生問題的元素清單。

低色彩對比問題

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

Chromium 問題：1120316

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

您現在可以在開發人員工具中，為喜愛的指令自訂鍵盤快速鍵。

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

自訂鍵盤快速鍵

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

Chromium 問題：174309

下載預覽管道

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

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

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

開發人員工具的新功能

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