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

偵錯支援：Trusted Types 違規事項

Trusted Type 違規中斷點

您現在可以在「來源」面板中，針對 Trusted Types 違規事項設定中斷點並擷取例外狀況。

Trusted Types API 有助於防範 DOM 型跨網站指令碼安全漏洞。請參閱這篇文章，瞭解如何使用 Trusted Types 編寫、審查及維護應用程式，避免 DOM XSS 漏洞。

在「來源」面板中，開啟「偵錯工具」側欄窗格。展開「CSP Violation Breakpoints」(CSP 違規中斷點) 部分，然後勾選「Trusted Type violations」(Trusted Types 違規) 核取方塊，即可在例外狀況發生時暫停執行。如要親自體驗，請前往這個示範頁面。

Chromium 問題：1142804

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

「來源」面板現在會在違反「受信任型別」的程式碼行旁顯示警告圖示。將滑鼠游標懸停在該項目上，即可預覽例外狀況。按一下即可展開「問題」分頁，其中提供例外狀況的詳細資料，以及如何修正問題的指引。

Chromium 問題：1150883

擷取超出檢視區塊的節點螢幕截圖

現在可以擷取完整節點的螢幕截圖，包括摺疊區塊下方的內容。先前，如果內容不在可視區域內，系統會截斷螢幕截圖。現在擷取的完整網頁螢幕截圖也更精確。

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

Chromium 問題：1003629

網路要求的全新 Trust Tokens 分頁

使用新的「Trust Tokens」分頁檢查 Trust Token 網路要求。

Trust Token 是一種新 API，可協助防範詐欺及辨別機器人和真人，且不會進行被動追蹤。瞭解如何開始使用 Trust Token。

我們將在後續版本中提供更多偵錯支援。

Chromium 問題：1126824

Lighthouse 面板中的 Lighthouse 7

「Lighthouse」面板現在會執行 Lighthouse 7。如要查看完整的異動項目清單，請參閱版本資訊。

Lighthouse 7 的新稽核：

• 預先載入最大內容繪製 (LCP) 圖片。稽核 LCP 元素使用的圖片是否已預先載入，以縮短 LCP 載入時間。
• 記錄在 Issues 面板中的問題。指出 Issues 面板中未解決的問題清單。
• 漸進式網頁應用程式 (PWA)。PWA 類別有相當大的變化。

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

  • 「註冊服務工作人員…」稽核會移至「PWA 最佳化」群組，而「使用 HTTPS」稽核現在則會納入「安裝能力需求」主要稽核中。
  • 「速度飛快，穩定可靠」群組已移除。由於改版後的「可安裝性規定」稽核包含離線功能檢查，因此「目前的網頁和 start_url 在離線時會傳回狀態碼 200 的回應」稽核已移除。「網頁在行動網路中的載入速度夠快」稽核也已移除。

Chromium 問題：772558

「元素」面板更新

支援強制 CSS :target 狀態

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

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

當網址中的雜湊和元素的 ID 相同時，請使用 :target 虛擬類別設定元素樣式。如要親自試用，請參閱這個示範。這項開發人員工具新功能可讓您測試這類樣式，不必一直手動變更網址。

Chromium 問題：1156628

新增複製元素捷徑

使用新的「複製元素」快速鍵，即可立即複製元素。

在「元素」面板中，對元素按一下滑鼠右鍵，然後選取「複製元素」。系統會在該元素下方建立新元素。

你也可以使用鍵盤快速鍵複製元素：

• Mac：Shift + Option + ⬇️
• Windows/ Linux：Shift + Alt + ⬇️

Chromium 問題：1150797、1150797

自訂 CSS 屬性的顏色挑選器

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

此外，您也可以按住 Shift 鍵並點選顏色挑選器，即可依序查看顏色值的 RGBA、HSLA 和十六進位表示法。

Chromium 問題：1147016

複製 CSS 屬性的新快速鍵

現在只要使用幾個新快速鍵，就能更快複製 CSS 屬性。

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

複製 CSS 類別的選項：

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

CSS 屬性的複製選項：

• 複製聲明。複製目前行的宣告。
• 複製屬性。複製目前行的屬性。
• 複製值：複製目前行的值。

Chromium 問題：1152391

Cookie 更新

顯示已解碼 Cookie 的新選項

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

前往「應用程式」面板，然後選取「Cookie」窗格。選取清單中的任何 Cookie。 勾選新的「顯示已解碼的網址」核取方塊，即可查看已解碼的 Cookie。

Chromium 問題：997625

只清除顯示的 Cookie

「Cookies」窗格中的「清除所有 Cookie」按鈕，現在已替換為「清除篩選出的 Cookie」按鈕。

在「Application」面板 >「Cookies」窗格中，在文字方塊中輸入文字來篩選 Cookie。在本範例中，我們依「PREF」篩選清單。按一下「清除篩選出的 Cookie」按鈕，即可刪除顯示的 Cookie。清除篩選器文字後，您會看到其他 Cookie 仍保留在清單中。先前您只能清除所有 Cookie。

Chromium 問題：978059

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

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

Chromium 問題：1012337

編輯自訂裝置的 User-Agent Client Hints

您現在可以編輯自訂裝置的 User-Agent Client Hints。

依序前往「設定」 >「裝置」，然後按一下「新增自訂裝置...」。展開「User-Agent Client Hints」部分，即可編輯 Client Hints。

使用者代理程式用戶端提示是使用者代理程式字串的替代文字，可讓開發人員以兼顧隱私權和人體工學的方式，存取使用者瀏覽器的相關資訊。如要進一步瞭解使用者代理程式用戶端提示，請前往 web.dev/user-agent-client-hints/。

Chromium 問題：1073909

網路面板更新

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

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

Chromium 問題：1122580

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

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

WebTransport 是新的 API，可提供低延遲的雙向用戶端/伺服器訊息傳輸。如要進一步瞭解應用情境，以及如何提供意見回饋，協助我們決定未來實作方式，請前往 web.dev/webtransport/。

Chromium 問題：1152290

「線上」重新命名為「無節流」

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

Chromium 問題：1028078

「控制台」、「來源」面板和「樣式」窗格新增複製選項

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

您現在可以在控制台和「來源」面板中使用新快速鍵複製物件值。如果您要複製大型物件 (例如長陣列)，這項功能就特別實用。

Chromium 問題：1149859、1148353

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

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

• 「來源」面板中的檔案，或
• 「元素」面板中「樣式」窗格的檔案名稱

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

Chromium 問題：1155120

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

頁框詳細資料檢視畫面中的新 Service Worker 資訊

開發人員工具現在會在建立專屬服務工作人員的影格下方顯示這些工作人員。

在「應用程式」面板中，展開含有服務工作人員的影格，然後選取「服務工作人員」樹狀結構下的服務工作人員，即可查看詳細資料。

Chromium 問題：1122507

在「影格詳細資料」檢視畫面中測量記憶體資訊

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

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

Chromium 問題：1139899

在「問題」分頁中提供意見回饋

如要改善問題訊息，請依序前往「控制台」或「更多設定」 >「更多工具」 >「問題」 > 開啟「問題」分頁。展開問題訊息，然後按一下「這則問題訊息是否對你有幫助？」，即可在彈出式視窗中提供意見回饋。

「效能」面板中的影格遺失

在「效能」面板中分析載入效能時，「影格」部分現在會將捨棄的影格標示為紅色。將滑鼠游標懸停在該圖示上，即可查看影格速率。

Chromium 問題：1075865

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

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

啟用裝置工具列後，選取下列其中一個裝置：Surface Duo 或 Samsung Galaxy Fold。

按一下新的跨螢幕圖示，即可在單螢幕/摺疊和雙螢幕/展開姿勢之間切換。

您也可以啟用「實驗性網頁平台功能」，存取新的 CSS 媒體 screen-spanning 功能和 JavaScript getWindowSegments API。實驗圖示會顯示「實驗性網頁平台功能」旗標的狀態。開啟標記時，圖示會醒目顯示。前往 chrome://flags 並切換旗標。

Chromium 問題：1054281

實驗功能

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

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

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

按一下底部的「記錄」按鈕，即可開始記錄互動。嘗試填寫畫面上的表單。請注意，Puppeteer 指令會相應附加至檔案。再次點選「錄製」按鈕，即可停止錄製。

如要執行指令碼，請按照 Puppeteer 官方網站的入門指南操作。

請注意，這項實驗尚處於早期階段。我們計畫在日後改善及擴充錄音機功能。

Chromium 問題：1144127

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

新版字型編輯器是「樣式」窗格中的彈出式編輯器，可編輯字型相關屬性，協助您為網頁找到合適的排版。

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

Chromium 問題：1093229

CSS Flexbox 偵錯工具

自上個版本以來，開發人員工具已新增 flexbox 偵錯的實驗性支援。

開發人員工具現在會繪製引導線，協助您更清楚地查看 CSS align-items 屬性。此外，也支援 CSS gap 屬性。以這個範例來說，我們有 CSS gap: 12px;。請注意每個間隙的影線模式。

Chromium 問題：1139949

新的「CSP 違規事項」分頁

在新的「CSP 違規事項」分頁中，一目瞭然地查看所有內容安全政策 (CSP) 違規事項。 這個新分頁是實驗功能，可望簡化處理大量 CSP 和 Trusted Type 違規網頁的作業。

Chromium 問題：1137837

新的色彩對比計算方式 - 進階感知對比演算法 (APCA)

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

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

這個範例顯示 APCA 門檻為 38%。對比度必須符合或超過所列值。這個值是根據字體粗細和大小計算，請參閱這份 APCA 查閱表。

Chromium 問題：1121900

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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