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

Jecelyn Yeen

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

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

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

在「Elements」面板中點選 @container at-rule 的 DOM 元素後，開發人員工具現在會在「Styles」窗格中顯示 @container 資訊。按一下名稱編輯尺寸。「Styles」窗格也會顯示對應的容器資訊。將遊標懸停在廣告上，即可醒目顯示網頁上的容器元素，並檢查容器大小。按一下以選取容器元素。

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

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

Chromium 問題：1146422

在「網路」面板中預覽網路套件

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

Web Bundle 功能目前處於實驗階段。如要進行測試，請啟用 chrome://flags 底下的 #enable-experimental-web-platform-features 標記。

Web 套件預覽

Chromium 問題：1182537

Attribution Reporting API 偵錯

Attribution Reporting API 錯誤現在會記錄在「問題」分頁中。

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

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

Chromium 問題：1190735

控制台改善字串處理方式

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

控制台的新內容選單

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

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

Chromium 問題：1208389

改善 CORS 偵錯

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

按一下 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 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59