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

Jecelyn Yeen

對「信任類型」違規事件偵錯支援服務

Trusted Type 違規事項中斷點

您現在可以在「Sources」面板中設定中斷點，並擷取「受信任類型」違規項目的例外狀況。

Trusted Types API 可防範 DOM 型跨網站指令碼攻擊安全漏洞。如要瞭解如何使用「可信任類型」編寫、審查及維護無 DOM XSS 安全漏洞的應用程式，請參閱這篇文章。

在「來源」面板中，開啟「偵錯工具」側欄窗格。展開「CSP Violation Breakpoints」部分，並勾選「Trusted Type violations」核取方塊，暫停例外狀況。歡迎透過這個示範頁面自行嘗試。

Trusted Type 違規事項中斷點

Chromium 問題：1142804

「來源」面板現在會在違反「信任的類型」行旁邊顯示警告圖示。將滑鼠遊標懸停在這個例外狀況上即可預覽例外狀況。按一下該圖示展開「Issues」分頁，即可進一步瞭解例外狀況和修正指南。

「來源」面板中與「問題」分頁中的連結問題

Chromium 問題：1150883

擷取可視區域外的節點螢幕截圖

您現在可以擷取完整節點的節點螢幕截圖，包括需捲動位置的內容。過去，對於可視區域未顯示的內容，螢幕截圖會遭到截斷。現在全頁螢幕截圖也非常清楚

在「元素」面板中，在元素上按一下滑鼠右鍵，然後選取「擷取節點螢幕截圖」。

擷取可視區域外的節點螢幕截圖

Chromium 問題：1003629

網路要求的全新「信任權杖」分頁

使用新的「Trust Tokens」分頁檢查信任權杖網路要求。

Trust Token 是一種新的 API，可用於打擊詐欺、辨別機器人和真人，而且不需要被動追蹤。瞭解如何開始使用 Trust Token。

我們將在下一個版本中提供更多偵錯支援。

網路要求的全新「信任權杖」分頁

Chromium 問題：1126824

Lighthouse 面板中的 7 號燈塔

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

Lighthouse 面板中的 7 號燈塔

Lighthouse 7 新稽核：

  • 預先載入最大內容繪製 (LCP) 圖片。在預先載入 LCP 元素使用的圖片時進行稽核，以縮短 LCP 時間。
  • Issues 面板會記錄問題。表示 Issues 面板中的未解決問題清單。
  • 漸進式網頁應用程式 (PWA)PWA 類別大幅變動。

  • 「Installable」群組現在完全由啟用 Chrome 安裝條件的功能檢查技術提供。這些信號與資訊清單窗格中顯示的信號相同。

    • 「註冊 Service Worker...」稽核會移至 PWA 最佳化群組，且「使用 HTTPS」稽核現已納入金鑰「安裝規定」稽核中。
    • 已移除「快速又可靠的」群組。這次的新版「安裝規定」稽核作業包括離線功能檢查，因此「目前網頁和 start_url 回應時，會回應 200，當離線」稽核遭到移除。不過，我們移除了「行動網路的載入速度夠快」稽核。

Chromium 問題：772558

「元素」面板更新

支援強制執行 CSS :target 狀態

您現在可以使用開發人員工具來強制執行並檢查 CSS :target 狀態。

在「元素」面板中選取元素，然後切換元素狀態。啟用 :target 核取方塊即可強制並檢查樣式。

如果網址中的雜湊與元素 ID 相同，請使用 :target 虛擬類別為元素設定樣式。歡迎觀看這個示範影片，親自體驗看看。您可以利用這項全新的開發人員工具功能測試這類樣式，而不必一直手動變更網址。

強制執行 CSS「:target」狀態

Chromium 問題：1156628

新增複製元素的捷徑

你可以使用新的「Duplicate element」捷徑立即複製元素。

在「元素」面板中的特定元素上按一下滑鼠右鍵，然後選取「複製元素」。並在其底下建立新元素。

或者，您也可以使用鍵盤快速鍵複製元素：

  • Mac：Shift + Option + ⬇️
  • 視窗/ Linux：Shift + Alt + ⬇️

元素重複

Chromium 問題：1150797、1150797

自訂 CSS 屬性的顏色挑選器

「Styles」窗格現在會顯示自訂 CSS 屬性的顏色挑選器。

此外，您可以按住 Shift 鍵並按一下顏色挑選器，循環切換顏色值的 RGBA、HSLA 和十六進位表示法。

自訂 CSS 屬性的顏色挑選器

Chromium 問題：1147016

新增複製 CSS 屬性的捷徑

您現在可以透過幾個新的快速鍵，更快速地複製 CSS 屬性。

在「元素」面板中選取元素。然後在「樣式」窗格中的 CSS 類別或 CSS 屬性上按一下滑鼠右鍵，即可複製值。

新增複製 CSS 屬性的捷徑

複製 CSS 類別的選項：

  • 複製選取器。複製目前的選取器名稱。
  • 複製規則。複製目前選取器的規則。
  • 複製所有宣告：複製目前規則下的所有宣告，包括無效和前置字串的屬性。

複製 CSS 資源選項：

  • 複製聲明。複製目前行的宣告。
  • 複製資源。複製目前線條的屬性。
  • 複製值：複製目前這行的值。

Chromium 問題：1152391

Cookie 更新

新增顯示網址解碼 Cookie 的新選項

您現在可以選擇在「Cookie」窗格中查看經過網址解碼的 Cookie 值。

前往「Application」面板，然後選取「Cookies」窗格。選取名單上的任何 Cookie。 勾選新的「顯示已解碼的網址」核取方塊，即可查看已解碼的 Cookie。

顯示網址解碼 Cookie 的選項

Chromium 問題：997625

僅清除可見的 Cookie

「Cookie」窗格中的「Clear all cookies」按鈕現已改為「Clear Filter Cookie」按鈕。

前往「應用程式」面板 >「Cookie」窗格，在文字方塊中輸入文字來篩選 Cookie。在本範例中，我們使用「PREF」篩選清單。按一下「Clear Filter Cookie」(清除經過篩選的 Cookie) 按鈕，即可刪除畫面上顯示的 Cookie。清除篩選器文字，即可看到其他 Cookie 保留在清單中。過去，您只能選擇清除所有 Cookie。

僅清除可見的 Cookie

Chromium 問題：978059

在「儲存空間」窗格中清除第三方 Cookie 的新選項

在清除「Storage」窗格中的網站資料時，開發人員工具現在預設只會清除第一方 Cookie。啟用「包括第三方 Cookie」，即可一併清除第三方 Cookie。

清除第三方 Cookie 的選項

Chromium 問題：1012337

編輯自訂裝置的使用者代理程式用戶端提示

您現在可以編輯自訂裝置的使用者代理程式用戶端提示。

依序前往「設定」 >「裝置」，然後按一下「新增自訂裝置...」。展開「User agent client hints」(使用者代理程式用戶端提示) 區段，以編輯用戶端提示。

編輯使用者代理程式用戶端提示

User-Agent Client Hints 是 User-Agent 字串的替代方案，可讓開發人員以保護隱私權和符合人機特性的方式，存取使用者瀏覽器的相關資訊。如要進一步瞭解使用者代理程式用戶端提示，請前往 web.dev/user-agent-client-hints/。

Chromium 問題：1073909

網路面板更新

保留「記錄網路記錄」設定

開發人員工具現在會保留「記錄網路記錄」設定。先前，只要網頁重新載入，開發人員工具就會重設使用者的選擇。

記錄網路記錄

Chromium 問題：1122580

在「網路」面板中查看 WebTransport 連線

網路面板現在會顯示 WebTransport 連線。

WebTransport 連線

WebTransport 是全新 API，提供低延遲的雙向用戶端與伺服器訊息傳遞服務。如要進一步瞭解這項功能的用途，以及如何向 web.dev/webtransport/ 實作未來實作成果的寶貴意見。

Chromium 問題：1152290

「線上」已重新命名為「禁止節流」

網路模擬選項「Online」現已重新命名為「No Throttling」。

記錄網路記錄

Chromium 問題：1028078

「Console」、「來源」面板和「樣式」窗格提供新的複製選項

在「控制台」和「來源」面板中複製物件的新快速鍵

您現在可以使用「控制台」和「來源」面板中的新快速鍵複製物件值。在要複製的大型物件 (例如很長陣列) 時，這個方法特別實用。

在控制台中複製物件

複製「來源」面板中的物件

Chromium 問題：1149859、1148353

新增可複製「來源」面板和「樣式」窗格中檔案名稱的快速鍵

現在即可複製檔案名稱，請在以下位置按一下滑鼠右鍵：

  • 「Sources」面板中的檔案
  • 在「Elements」面板中的「Styles」窗格中顯示的檔案名稱。

從內容選單中選取「Copy file name」，即可複製檔案名稱。

複製「來源」面板中的檔案名稱

在「Styles」窗格中複製檔案名稱

Chromium 問題：1155120

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

「Frame 詳細資料」檢視畫面中的新 Service Worker 資訊

開發人員工具會在建立對應的服務工作站下方顯示。

在「Application」面板中，展開內含服務工作站的框架，然後在「Service Workers」樹狀結構下方選取 Service Worker。

「Frame Details」(頁框詳細資料) 檢視畫面中的 Service Workers 資訊

Chromium 問題：1122507

在「Frame Details」檢視畫面中測量記憶體資訊

performance.measureMemory() API 狀態現在會顯示在「API 可用性」部分下方。

新的 performance.measureMemory() API 可估算整個網頁的記憶體用量。如要瞭解如何使用這個新的 API 監控網頁的記憶體總用量，請參閱這篇文章。

測量記憶體

Chromium 問題：1139899

透過「問題」分頁提供意見

如果您想改善問題訊息，請前往「Console」或「更多設定」>「更多工具」>「問題」，前往「問題」分頁，然後開啟「問題」分頁。展開問題訊息，然後按一下「What is the issue message to you?」(問題訊息是否有幫助？) 並在彈出式視窗中提供意見回饋。

問題意見回饋連結

「效能」面板中捨棄的影格

現在在效能面板中分析載入效能時，「Frames」區段會將捨棄的影格標示為紅色。將遊標懸停在資訊卡上，即可查看影格速率。

捨棄的影格

Chromium 問題：1075865

在裝置模式中模擬摺疊式裝置和雙螢幕

您現在可以在開發人員工具中模擬雙螢幕和摺疊式裝置。

啟用裝置工具列後，選取以下任一裝置：「Surface Duo」或「Samsung Galaxy Fold」。

按一下新的跨距圖示，即可在單螢幕或摺疊與雙螢幕或展開型態間切換。

您也可以啟用實驗性 Web Platform 功能，存取新的 CSS 媒體 screen-spanning 功能和 JavaScript getWindowSegments API。實驗圖示會顯示「Experimental Web Platform 功能」旗標的狀態。旗標啟用後，系統會醒目顯示圖示。前往 chrome://flags 並切換旗標。

模擬雙螢幕體驗

Chromium 問題：1054281

實驗功能

使用 Puppeteer Recorder 自動執行瀏覽器測試

開發人員工具現在可以根據您與瀏覽器的互動情形產生 Puppeteer 指令碼，方便您自動執行瀏覽器測試。Puppeteer 是 Node.js 程式庫，提供高階 API，以便透過開發人員工具通訊協定控制 Chrome 或 Chromium。

前往這個示範頁面。在開發人員工具中開啟「Sources」面板。選取左側窗格中的「Recording」分頁標籤。新增記錄並命名檔案 (例如 test01.js)。

按一下底部的「錄製」按鈕即可開始記錄互動。試著填寫畫面上的表單。您會發現，Puppeteer 指令會相應地附加到檔案中。再次按一下「Record」按鈕，即可停止記錄。

如要執行指令碼，請參閱 Puppeteer 官方網站的入門指南。

請注意，這只是初期實驗階段，我們計劃逐步改善和擴充錄音工具的功能。

布偶錄音機

Chromium 問題：1144127

「樣式」窗格中的字型編輯器

新的字型編輯器是「樣式窗格」中的彈出式編輯器，可用來尋找字型相關屬性，協助您找出網頁的最佳字體排版。

彈出式視窗提供簡潔的 UI，可透過一系列直觀的輸入類型來動態操控字體排版。

「樣式」窗格中的字型編輯器

Chromium 問題：1093229

CSS Flexbox 偵錯工具

開發人員工具自上次版本以來，開始對 flexbox 偵錯功能新增實驗性支援。

開發人員工具現在會繪製一條引導線，協助你以更清楚的方式呈現 CSS align-items 屬性。系統也支援 CSS gap 屬性。在本例中，我們採用 CSS gap: 12px;。請注意每個差距的綁架模式。

Flexbox

Chromium 問題：1139949

新的 CSP 違規事項分頁

在全新的「CSP 違規事項」分頁中，一覽所有內容安全政策 (CSP) 違規事項。 這個新分頁是一項實驗功能，有助於輕鬆處理含有大量 CSP 和 Trusted Type 違規網頁的網頁。

CSP 違規分頁

Chromium 問題：1137837

採用全新色彩對比計算 - 進階感知對比演算法 (APCA)

進階感知對比演算法 (APCA) 即將取代顏色挑選器中的 AA/AAA 指南對比率。

APCA 是一種新方法，可根據現代研究對色彩感知程度計算對比。相較於 AA/AAA 指南，APCA 更取決於情境。系統會根據文字的空間屬性 (字型粗細和大小)、顏色 (感知文字與背景之間的亮度差異) 以及情境 (環境光度、周遭環境、文字預定用途) 計算對比。

顏色挑選器中的 APCA

範例顯示 APCA 門檻為 38%。對比度必須達到或超過所列值。這個值是根據字型粗細和大小計算，請參考此 APCA 對照表。

Chromium 問題：1121900

下載預覽頻道

建議您使用 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