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

Jecelyn Yeen

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

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

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

在「元素」面板中，按一下含有 @container at 規則的 DOM 元素，開發人員工具現在會在「樣式」窗格中顯示 @container 資訊。按一下即可編輯大小。「樣式」窗格也會顯示相應的容器資訊。將游標懸停在該元素上，即可醒目顯示網頁上的容器元素，並檢查容器大小。按一下即可選取容器元素。

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

Chromium 問題：1146422

在「網路」面板中預覽網頁組合

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

網頁組合功能目前為實驗功能。請在 chrome://flags 下啟用 #enable-experimental-web-platform-features 標記進行測試。

Chromium 問題：1182537

Attribution Reporting API 偵錯

系統現在會在「問題」分頁中，回報 Attribution Reporting API 錯誤。

Attribution Reporting 是全新的 API，可協助您評估使用者動作 (例如點按或觀看廣告) 是否促成轉換，不必使用跨網站 ID。

Chromium 問題：1190735

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

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

在 Chrome 90 中，開發人員工具更新了「控制台」，一律會將字串輸出內容格式化為有效的 JSON 常值。開發人員回報，這項變更可能會造成混淆，部分開發人員認為逸出字元數量過多，導致輸出內容難以解讀。

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

Chromium 問題：1208389

改善 CORS 偵錯功能

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

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

Chromium 問題：1213393

Lighthouse 8.1

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

如果網站向 Lighthouse 公開來源對應，請尋找「查看樹狀圖」按鈕，查看已發布 JavaScript 的細目，並依大小和載入時的涵蓋範圍進行篩選。

報表也包含新的指標篩選器 (請參閱螢幕截圖中的「顯示與下列項目相關的稽核」篩選器)。選擇要著重的指標，找出最能提升該指標的機會和診斷結果。

成效類別的評分方式經過多次調整，以配合其他成效工具，並更準確地反映網路狀態。

如需完整異動清單，請參閱版本資訊。

Chromium 問題：772558

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

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

目前在 ChromeOS (CrOS) 上，如果 Chrome 應用程式和 Android 應用程式聲明具備「new-note」功能，即可在觸控筆設定中選為記事應用程式 (如果 CrOS 裝置曾搭配觸控筆使用，就會顯示這項設定)。選取為筆記應用程式後，即可透過觸控筆調色盤的「建立記事」按鈕啟動應用程式。在應用程式資訊清單中新增 new-note-url 欄位，是為網頁應用程式新增同等功能的一環。

Chromium 問題：1185678

修正 CSS 比對選取器

開發人員工具修正了 CSS 相符選取器，上一個版本無法運作。

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

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

Chromium 問題：1219153

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

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

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

Chromium 錯誤：998674

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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