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

支援偵錯 Trusted Types 違規問題

Trusted Type 違規問題的中斷點

您現在可以在「Sources」面板中，針對信任類型違規設定中斷點和擷取例外狀況。

Trusted Types API 可協助您防範以 DOM 為基礎的跨網站指令碼漏洞。請參閱這篇文章，瞭解如何使用信任類型編寫、審查及維護不含 DOM XSS 漏洞的應用程式。

在「Sources」面板中，開啟「debugger」側邊面板。展開「CSP 違規中斷點」部分，然後啟用「信任類型違規」核取方塊，即可在例外狀況中暫停。您可以透過這個示範頁面親自試用。

Chromium 問題：1142804

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

「Sources」面板現在會在違反信任類型的行旁顯示警告圖示。將滑鼠游標懸停在上面，即可預覽例外狀況。按一下該圖示即可展開「Issues」分頁，其中會提供例外狀況的詳細資訊，以及如何修正的說明。

Chromium 問題：1150883

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

現在可以擷取完整節點的節點螢幕截圖，包括折疊下方的內容。先前，如果可視區域中沒有顯示的內容，截圖就會被截斷。全頁螢幕截圖現在也更精確。

在「Elements」面板中，按一下元素並選取「Capture node screenshot」。

Chromium 問題：1003629

網路要求的新 Trust Tokens 分頁

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

Trust Token 是一種新的 API，可協助防範詐欺，並區分機器人和真人，不必進行被動追蹤。瞭解如何開始使用 Trust Tokens。

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

Chromium 問題：1126824

Lighthouse 7 在 Lighthouse 面板中

Lighthouse 面板目前執行 Lighthouse 7。如需完整的變更清單，請參閱版本資訊。

Lighthouse 7 中的新稽核項目：

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

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

  • 「註冊服務工作者…」稽核項目已移至「PWA 最佳化」群組，而「使用 HTTPS」稽核項目現在已納入「可安裝性要求」重要稽核項目。
  • 速度飛快，穩定可靠群組已遭移除。由於修訂版的「可安裝性規定」稽核作業包含離線功能檢查，因此已移除「目前的網頁和 start_url 在離線時傳回 200」稽核作業。我們也移除了「網頁在行動網路中的載入速度夠快」稽核項目。

Chromium 問題：772558

「元素」面板更新

支援強制 CSS :target 狀態

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

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

如果網址中的雜湊和元素的 ID 相同，請使用 :target 擬似類別為元素套用樣式。請參閱這部示範影片，親自試用。這項新的開發人員工具功能可讓您測試這類樣式，而無須每次都手動變更網址。

Chromium 問題：1156628

新增捷徑可複製元素

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

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

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

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

Chromium 問題：1150797、1150797

自訂 CSS 屬性的顏色挑選器

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

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

Chromium 問題：1147016

用於複製 CSS 屬性的新捷徑

您現在可以使用幾個新的捷徑，更快速地複製 CSS 屬性。

在「Elements」面板中選取元素。接著，在「Styles」窗格中按一下 CSS 類別或 CSS 屬性，複製值。

複製 CSS 類別的選項：

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

複製 CSS 屬性選項：

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

Chromium 問題：1152391

Cookie 更新

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

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

前往「Application」面板，然後選取「Cookies」窗格。選取清單中的任何 Cookie。勾選新的「Show URL decoded」核取方塊，即可查看已解碼的 Cookie。

Chromium 問題：997625

只清除可見的 Cookie

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

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

Chromium 問題：978059

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

在「儲存空間」窗格中清除網站資料時，DevTools 現在預設只會清除第一方 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」

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

Chromium 問題：1028078

主控台、來源面板和樣式窗格中的新複製選項

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

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

Chromium 問題：1149859、1148353

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

你現在可以按一下滑鼠右鍵，複製檔案名稱：

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

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

Chromium 問題：1155120

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

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

開發人員工具現在會在建立服務工作者的框架下方顯示專屬服務工作者。

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

Chromium 問題：1122507

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

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

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

Chromium 問題：1139899

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

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

效能面板中的影格遺失

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

Chromium 問題：1075865

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

您現在可以在 DevTools 中模擬雙螢幕和折疊式裝置。

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

按一下新的跨螢幕圖示，即可在單螢幕或折疊、雙螢幕或展開模式之間切換。

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

Chromium 問題：1054281

實驗功能

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

開發人員工具現在可以根據您與瀏覽器的互動情形產生 Puppeteer 指令碼，讓您更輕鬆地自動執行瀏覽器測試。Puppeteer 是 Node.js 程式庫，可提供高階 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 和信任類型違規的網頁。

Chromium 問題：1137837

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

進階感知對比度演算法 (APCA) 會取代 色彩挑選器中 AA/AAA 規範的對比度。

APCA 是一種新方法，可根據顏色知覺的最新研究來計算對比度。與 AA/AAA 指南相比，APCA 更依賴情境。對比度會根據文字的空間屬性 (字體粗細和大小)、顏色 (文字和背景之間的亮度差異) 和情境 (環境光、周遭環境、文字的預期用途) 計算而得。

這個範例顯示 APCA 門檻為 38%。對比度比率必須符合或高於所列值。這個值是根據字型粗細和大小計算，參考這個 APCA 查詢表。

Chromium 問題：1121900

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。