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

Jecelyn Yeen

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

Trusted Type 違規事項中斷點

您現在可以前往「來源」頁面，設定中斷點及擷取「信任類型」違規事項的例外狀況 面板。

Trusted Types API 可防範 DOM 型跨網站指令碼攻擊安全漏洞。瞭解詳情 使用「Trusted Types」撰寫、審查及維護應用程式，不受 DOM XSS 漏洞影響 請按這裡。

在「來源」面板中，開啟「偵錯工具」側欄窗格。展開 CSP 違規事項 中斷點區段，並啟用受信任類型違規核取方塊，即可暫停 例外狀況。歡迎透過這個示範頁面自行嘗試。

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 應用程式的 安裝標準這些信號與資訊清單窗格中顯示的信號相同。

    • 「Registers a 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 屬性上按一下滑鼠右鍵 在「Styles」(樣式) 窗格中複製值。

新增複製 CSS 屬性的捷徑

複製 CSS 類別的選項：

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

複製 CSS 資源選項：

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

Chromium 問題：1152391

Cookie 更新

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

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

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

顯示網址解碼 Cookie 的選項

Chromium 問題：997625

僅清除可見的 Cookie

「Cookie」窗格中的「清除所有 Cookie」按鈕現已改為「清除篩除的 Cookie」 按鈕。

在「Application」面板中 >Cookie 窗格，在文字方塊中輸入文字來篩選 Cookie。於 在這個範例中，我們使用「PREF」篩選清單。按一下「清除篩選的 Cookie」按鈕， 以及刪除可見的 Cookie。清除篩選器文字，即可看到其他 Cookie 保留在 請參考閱讀清單，進一步瞭解 如何選擇 Kubeflow Pipelines SDK 或 TFX過去，您只能選擇清除所有 Cookie。

僅清除可見的 Cookie

Chromium 問題：978059

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

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

清除第三方 Cookie 的選項

Chromium 問題：1012337

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

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

前往「設定」>裝置，然後點選「新增自訂裝置...」。展開 [使用者代理程式] 編輯用戶端提示部分。

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

「使用者代理程式用戶端提示」是 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 Worker 的頁框，然後選取 Service Worker 在「Service Workers」樹狀結構下方查看詳細資料。

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

Chromium 問題：1122507

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

performance.measureMemory() API 狀態現在會顯示在 API 可用性下方 專區。

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

測量記憶體

Chromium 問題：1139899

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

如果想改善問題訊息，請前往管理中心的「問題」分頁，或是 「更多設定」>更多工具 >問題 >開啟「問題」分頁。展開問題 訊息，然後按一下「問題訊息是否對你有幫助？」，然後 彈出式視窗。

問題意見回饋連結

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

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

捨棄的影格

Chromium 問題：1075865

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

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

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

點選新跨螢幕圖示，即可在單螢幕、摺疊/雙螢幕或展開模式之間切換 包括安全性、防護機制

你也可以啟用實驗性 Web Platform 功能，存取新的 CSS 媒體 screen-spanning 功能和 JavaScript getWindowSegments API。實驗圖示會顯示 實驗性 Web Platform 功能旗標的狀態。標記顯示下列文字時，系統會醒目顯示圖示 已開啟。前往 chrome://flags 並切換旗標。

模擬雙螢幕體驗

Chromium 問題：1054281

實驗功能

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

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

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

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

如要執行指令碼，請參閱 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 影片留言。

開發人員工具新功能

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