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

全新 CSS 格線偵錯工具

開發人員工具現已進一步支援 CSS 格狀偵錯功能!

CSS 格狀偵錯

網頁上的 HTML 元素套用 display: griddisplay: inline-grid 後,在「Elements」(元素) 面板中的各元素旁邊就會顯示 grid 標記。按一下徽章即可在頁面上切換格狀疊加層顯示方式。

新的「Layout」窗格有「Grid」區段,提供多個檢視格線的選項。

詳情請參閱說明文件

Chromium 問題:1047356

新增 WebAuthn 分頁

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

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

WebAuthn 分頁

在全新的 WebAuthn 分頁前,Chrome 並不支援原生 WebAuthn 偵錯。 開發人員需要實體驗證器,才能使用 Web Authentication API 測試自己的網頁應用程式。

透過全新的「WebAuthn」WebAuthn分頁,網頁程式開發人員現在可以模擬這些驗證器、自訂功能及檢查其狀態,完全不需要任何實體驗證器。這樣可更輕鬆地偵錯。

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

Chromium 問題:1034663

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

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

舉例來說,如果您想一次查看「Elements」(元素) 和「Sources」(來源) 面板,可以在「Sources」(來源) 面板上按一下滑鼠右鍵,然後選取「Move tobottom」(移至底部),將其移至底部。

移至底端

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

移至頂端

Chromium 問題:1075732

元素面板更新

在「Styles」(樣式) 窗格中查看運算側欄窗格

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

根據預設,「Styles」窗格中的「運算側欄」窗格會收合起來。按一下按鈕即可切換。

運算側欄窗格

Chromium 問題:1073899

在運算窗格中將 CSS 屬性分組

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

運用這項新的分組功能,您可以更輕鬆地在「Computed」窗格 (無捲動) 中瀏覽,並選擇性地專注在一組相關的屬性上進行 CSS 檢查。

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

將 CSS 屬性分組

Chromium 問題:109623010846731106251

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-typeurl 個篩選器

請使用網路面板中新的 resource-typeurl 關鍵字,篩選網路要求。

例如,使用 resource-type:image 即可專注於圖片的網路要求。

資源類型篩選器

請參閱依屬性篩選要求一文,以找出更多特殊關鍵字,例如 resource-typeurl

Chromium 問題:11211411104188

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

顯示 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 已淘汰。請改為從主面板開啟「Settings」

主面板中的設定

Chromium 問題:1121312

實驗功能

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

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

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

低色彩對比問題

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

Chromium 問題:1120316

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

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

前往「Settings」 >「Shortcuts」,將遊標懸停在指令上,然後按一下「Edit」按鈕 (鉛筆圖示),自訂鍵盤快速鍵。

自訂鍵盤快速鍵

如要重設所有快速鍵,請按一下「還原預設捷徑」

Chromium 問題:174309

下載預覽管道

考慮使用 Chrome Canary 版開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!

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

使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

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