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

Jecelyn Yeen

樣式窗格中的 CSS 容器查詢可供編輯

您現在可以在「Styles」窗格中查看及編輯 CSS 容器查詢。

容器查詢可提供更具動態性的回應式設計方法。@container 位置規則的運作方式與 @media 搭配媒體查詢的運作方式類似。不過，@container 不會查詢檢視區和使用者代理程式，而是查詢符合特定條件的祖系容器。

在「元素」面板中，按一下含有 @container at-rule 的 DOM 元素，DevTools 會在「Styles」窗格中顯示 @container 資訊。點選即可編輯大小。「Styles」窗格也會顯示相應的容器資訊。將滑鼠游標懸停在該元素上，即可在頁面上醒目顯示容器元素，並查看容器大小。按一下該元素即可選取容器元素。

容器查詢功能目前仍處於實驗階段。請開啟 chrome://flags 下方的 #enable-container-queries 標記進行測試。

樣式窗格中的 CSS 容器查詢可供編輯

Chromium 問題：1146422

「Network」面板中的網頁套件預覽

網頁套件是一種檔案格式，可在單一檔案中封裝一或多個 HTTP 資源。您現在可以在「Network」面板中預覽網頁套裝組合內容。

網站套件功能目前處於實驗階段。請啟用 chrome://flags 下方的 #enable-experimental-web-platform-features 標記進行測試。

網頁套件預覽畫面

Chromium 問題：1182537

Attribution Reporting API 偵錯

Attribution Reporting API 錯誤現已在「Issues」分頁中回報。

歸因報表是新的 API，可協助您評估使用者動作 (例如點擊廣告或觀看廣告) 是否導致轉換，且不必使用跨網站 ID。

「Issues」分頁中的 Attribution Reporting API 錯誤

Chromium 問題：1190735

在控制台中提供更完善的字串處理功能

控制台中的新內容選單可讓您將任何字串複製為內容、JavaScript 常值或 JSON 常值。

主控台的新內容選單

在 Chrome 90 中，DevTools 更新了主控台，讓字串輸出內容一律以有效的 JSON 文字表示格式化。我們收到開發人員的意見回饋，指出這項異動可能會造成混淆，有些人認為轉義量過多，導致輸出內容無法讀取。

控制台現在會將字串輸出格式化為有效的 JavaScript 文字常值，並提供 3 個複製字串選項。「Copy as JavaScript literal」選項會逸出適當的特殊字元，並根據字串內容將字串包在單引號、雙引號或反斜線中。複製字串內容則會將原始字串內容 (包括新行和其他特殊字元) 逐字複製到剪貼簿。最後，複製為 JSON 常值會將字串格式化為有效的 JSON 常值，並複製到剪貼簿。

Chromium 問題：1208389

改善 CORS 偵錯功能

控制台中的 CORS 相關 TypeError 現已連結至「Network」面板和「Issues」分頁。

按一下 CORS 相關錯誤訊息旁的兩個新圖示，即可查看網路要求，或在「問題」分頁中進一步瞭解錯誤訊息並取得可能的解決方案。

CORS 相關錯誤訊息旁的圖示

Chromium 問題：1213393

Lighthouse 8.1

Lighthouse 面板現在執行 Lighthouse 8.1。

燈塔

如果您的網站向 Lighthouse 提供原始碼，請尋找「View Treemap」按鈕，查看已發布的 JavaScript 細目，並依大小和載入涵蓋率進行篩選。

報表也包含新的指標篩選器 (請參閱螢幕截圖中的「Show audits relevant to」篩選器)。請選擇指標，專注於與提升該指標最相關的機會和診斷資訊。

成效類別的評分方式已進行多項調整，以便與其他成效工具保持一致，並更準確反映網站的狀態。

如需完整的變更清單，請參閱版本資訊。

Chromium 問題：772558

在「資訊清單」窗格中顯示新記事的網址

資訊清單窗格現在會顯示新筆記網址。

目前在 ChromeOS (CrOS) 上，宣告「new-note」功能的 Chrome 應用程式和 Android 應用程式，可能會在觸控筆設定中選取為記事應用程式 (如果 CrOS 裝置已與觸控筆搭配使用，就會顯示)。選取做為筆記應用程式後，即可透過觸控筆色版的「建立筆記」按鈕啟動應用程式。在應用程式資訊清單中新增 new-note-url 欄位，是為了在網頁應用程式中加入同等功能。

資訊清單窗格中的新記事網址

Chromium 問題：1185678

修正 CSS 比對選取器

DevTools 修正了 CSS 比對選取器，這項功能在先前版本中無法運作。

「Styles」窗格中以半形逗號分隔的選取器，會根據是否與所選 DOM 節點相符而顯示不同顏色：

  • 不相符的部分會以淺灰色顯示。
  • 相符的選取器部分會以黑色顯示。

CSS 比對選取器

Chromium 問題：1219153

在「Network」面板中美化 JSON 回應

您現在可以在「Network」面板中美化 JSON 回應。

在「Network」面板中開啟 JSON 回應，然後按一下 {} 圖示，即可美化 JSON 回應。

在「Network」面板中美化 JSON 回應

Chromium 錯誤：998674

下載預覽管道

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

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

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

開發人員工具的新功能

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