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

全新的 CSS 格線偵錯工具

開發人員工具現在可更完善地支援 CSS 格線偵錯！

如果網頁上的 HTML 元素套用了 display: grid 或 display: inline-grid，您可以在「元素」面板中看到旁邊顯示 grid 徽章。按一下徽章，即可切換頁面上的格線疊加顯示畫面。

新的「版面配置」窗格包含「格線」部分，提供多種格線檢視選項。

詳情請參閱說明文件。

Chromium 問題：1047356

新的 WebAuthn 分頁

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

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

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

有了全新的 WebAuthn 分頁，網頁開發人員現在可以模擬這些驗證器、自訂功能，以及檢查狀態，完全不需要實體驗證器。這樣就能更輕鬆地進行偵錯。

如要進一步瞭解 WebAuthn 功能，請參閱說明文件。

Chromium 問題：1034663

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

開發人員工具現在支援在頂端和底部面板之間移動工具。這樣就能同時查看任意兩項工具。

舉例來說，如要同時查看「元素」和「來源」面板，請在「來源」面板上按一下滑鼠右鍵，然後選取「移至底部」，將其移至底部。

同樣地，你也可以將任何底部分頁移至頂端，只要在分頁上按一下滑鼠右鍵，然後選取「移至頂端」即可。

Chromium 問題：1075732

「元素」面板更新

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

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

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

Chromium 問題：1073899

在「已計算」窗格中將 CSS 屬性分組

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

有了這項新分組功能，您就能更輕鬆地在「已計算」窗格中瀏覽 (減少捲動)，並選擇性地專注於一組相關屬性，進行 CSS 檢查。

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

Chromium 問題：1096230、1084673、1106251

Lighthouse 面板中的 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() 事件。

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

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

舉例來說，使用 resource-type:image 將焦點放在圖片的網路要求。

如要瞭解 resource-type 和 url 等更多特殊關鍵字，請參閱依屬性篩選要求。

Chromium 問題：1121141、1104188

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

顯示 COEP 和 COOP reporting to 端點

您現在可以在「Security & Isolation」(安全性與隔離) 區段下方，查看跨來源嵌入程式政策 (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 總覽」面板現在會顯示網頁中低色彩對比文字的清單。

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

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

Chromium 問題：1120316

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

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

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

如要重設所有快速鍵，請按一下「還原預設快速鍵」。

Chromium 問題：174309

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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