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

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

開發人員工具現可支援開發人員工具中的頂端和底部面板之間移動工具。如此一來，您就能同時查看任兩項工具。

舉例來說，如果您想要一次查看「Elements」和「Sources」面板，請在「Sources」面板上按一下滑鼠右鍵，然後選取「Move to top」，將該面板移至底部。

移至底端

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

移至頂端

Chromium 問題：1075732

「元素」面板更新

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

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

「Styles」窗格中的「Computedside」窗格預設為收合狀態。點選按鈕即可切換模式

運算側欄窗格

Chromium 問題：1073899

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

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

透過這項新的分組功能，您可以更輕鬆地在「Computed」窗格中瀏覽 (不需捲動)，並選擇性地將焦點放在一組相關的屬性進行 CSS 檢查。

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

將 CSS 屬性分組

Chromium 問題：1096230、1084673、1106251

Lighthouse 面板中的 6.4 燈塔

「Lighthouse」面板現在正在執行 Lighthouse 6.4。完整異動清單請參閱版本資訊。

燈塔

Lighthouse 6.4 中的全新稽核項目：

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

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 端點

您現在可以在「Security & Isolation」(安全性與隔離) 區段底下查看跨來源嵌入程式政策 (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 已淘汰。請改為從主面板開啟「Settings」。

主要面板中的設定

Chromium 問題：1121312

實驗功能

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

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

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

低色彩對比問題

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

Chromium 問題：1120316

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

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

依序前往「Settings」 >「Shortcuts」，將遊標懸停在指令上並按一下「Edit」按鈕 (鉛筆圖示)，即可自訂鍵盤快速鍵。

自訂鍵盤快速鍵

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

Chromium 問題：174309

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59