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

Jecelyn Yeen

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

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

容器查詢可以為回應式設計提供更靈活的做法。@container 規則的運作方式與使用 @media 的媒體查詢類似。不過，@container 不會查詢可視區域和使用者代理程式的資訊，而是查詢符合特定條件的祖系容器。

在「Elements」面板中按一下含有 @container 規則的 DOM 元素，開發人員工具現在會在「Styles」窗格中顯示 @container 資訊。按一下以編輯大小。「Styles」窗格也會顯示對應的容器資訊。將滑鼠遊標懸停在圖示上，即可醒目顯示網頁上的容器元素，並查看容器大小。按一下即可選取容器元素。

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

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

Chromium 問題：1146422

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

Web bundle (網頁組合) 這種檔案格式會將一或多個 HTTP 資源封裝成單一檔案。您現在可以在「網路」面板中預覽網路套件內容。

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

網頁套件預覽

Chromium 問題：1182537

Attribution Reporting API 偵錯

Attribution Reporting API 錯誤現已回報至「問題」分頁。

Attribution Reporting 是全新的 API，可讓您在不使用跨網站 ID 的情況下，評估使用者動作 (例如廣告點擊或觀看) 何時促成轉換。

「問題」分頁中的 Attribution Reporting API 錯誤

Chromium 問題：1190735

改善控制台中的字串處理方式

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

控制台的新內容選單

在 Chrome 90 版中，開發人員工具已更新控制台，一律將字串輸出格式設為有效的 JSON 常值。我們收到開發人員的意見回饋，指出這項變更可能會讓人感到困惑，有些人認為逸出量過多，導致輸出內容無法讀取。

Console 現在會將字串輸出的格式設為有效的 JavaScript 常值，進一步提供 3 個複製字串選項。複製為 JavaScript 常值選項會逸出適當的特殊字元，並根據字串內容，以單引號、雙引號或倒引號括住字串。改為「Copy string content」(複製字串內容) 會完整將原始字串內容 (包括新行和其他特殊字元) 複製到剪貼簿。最後，Copy as JSON 常值 (複製為 JSON 常值) 會將字串格式化為有效的 JSON 常值，並將其複製到剪貼簿。

Chromium 問題：1208389

改善 CORS 偵錯功能

控制台中的 CORS 相關 TypeErrors 現已連結至「網路」面板和「問題」分頁。

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

CORS 相關錯誤訊息旁的圖示

Chromium 問題：1213393

Lighthouse 8.1

「Lighthouse」面板現在正在執行 Lighthouse 8.1。

燈塔

如果您的網站會將來源地圖提供給 Lighthouse，請按一下「View Treemap」按鈕，查看運送 JavaScript 的詳細資料，並依大小和載入時的涵蓋範圍進行篩選。

這份報表還加入了新的指標篩選器 (請參閱螢幕截圖中的「顯示與這些稽核相關的稽核項目」)。挑選一項指標，著重在最能改善該指標的商機和診斷結果。

效能類別進行了多項評分變更，以便與其他效能工具保持一致，以更準確地反映網頁的狀態。

完整的異動清單請參閱版本資訊。

Chromium 問題：772558

在資訊清單窗格中顯示新的附註網址

「資訊清單」窗格現在會顯示新的附註網址。

目前在 ChromeOS (CrOS)、Chrome 應用程式和 Android 應用程式中宣告「新增附註」可在觸控筆設定中，將功能選為筆記應用程式 (如果與觸控筆搭配使用 CrOS 裝置，系統就會顯示這個功能)。如果將應用程式選為記事應用程式，就能透過觸控筆調色盤的「建立記事」啟動該應用程式按鈕。在應用程式資訊清單中新增 new-note-url 欄位，是為網頁應用程式新增同等功能的一部分。

資訊清單窗格中新增附註網址

Chromium 問題：1185678

修正 CSS 比對選取器

開發人員工具已修正 CSS 比對選取器，但這項功能在上一個版本中無法運作。

「Styles」窗格中的逗號分隔選取器會依據所選的 DOM 節點顯示不同顏色。

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

CSS 比對選取器

Chromium 問題：1219153

在「網路」面板中美化 JSON 回應

您現在可以在「Network」(網路) 面板中美化列印 JSON 回應。

在「網路」面板中開啟 JSON 回應，然後按一下 {} 圖示進行美化。

在「網路」面板中美化 JSON 回應

Chromium 錯誤：998674

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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