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

Jecelyn Yeen

以慣用語言使用開發人員工具

Chrome 開發人員工具現已支援超過 80 種語言，可讓你使用慣用的語言！

開啟「設定」，然後在「偏好設定」下方選取偏好的語言 >「Language」下拉式選單，然後重新載入開發人員工具。

偏好設定」width="800"高度：494">

Chromium 問題：1163928

裝置清單中有新的 Nest Hub 裝置

您現在可以在裝置模式中模擬 Nest Hub 和 Nest Hub Max 的尺寸。

按一下「切換裝置工具列」，選取裝置清單下方的 Nest Hub 或 Nest Hub Max。

Chromium 問題：1223525

在「Frame Details」(頁框詳細資料) 檢視畫面中進行來源試用

現在可以在「應用程式」面板的頁框詳細資料檢視畫面中，查看網站的來源試用相關資訊。

來源試用：您可以使用全新或實驗功能，讓所有使用者試用這項功能一段時間。

開啟有來源試用的頁面 (例如示範頁面)。在「Application」面板中，向下捲動至「Frames」部分，然後選取頂層頁框。

Chromium 問題：607555

全新 CSS 容器查詢徽章

容器元素 (符合 @container at-rules 條件的祖系元素) 旁邊會新增一個container徽章。按一下徽章，即可切換顯示所選容器的重疊顯示設定，以及該容器的所有查詢子系。

Chromium 問題：1146422

新增核取方塊，可反轉網路篩選器

使用新的「反轉」核取方塊，反轉網路面板中的篩選器。

例如，您可以輸入「status-code: 404」以篩選狀態為 404 的網路要求啟用「反轉」核取方塊來否定篩選條件 (顯示所有並非處於 404 狀態的網路要求)。

Chromium 問題：1054464

控制台側欄即將淘汰

移除控制台側欄，改為將篩選器使用者介面移至工具列。有任何疑慮或意見嗎？請透過這個 Issue Tracker 告訴我們。

Chromium 問題：1232937

在「問題」分頁和「網路」面板中顯示原始 Set-Cookie 標頭

開發人員工具現在會在「Issues」分頁中顯示原始 Set-Cookie 標頭。

先前，開發人員工具不會在網路面板中顯示格式錯誤的 Cookie (Set-Cookie 標頭不正確)。在「網路」面板中新增 response-header-set-cookie 篩選器後，使用者就能篩選原始的 Set-Cookie 標頭回應。開發人員工具會將「Issues」分頁中的原始 Set-Cookie 標頭連結至「Network」面板。

Chromium 問題：1179186

在控制台中將原生存取子設為自有屬性

Console 現在會將原生存取子顯示為自己的屬性。

舉例來說，在控制台中評估 new Int8Array([1, 2, 3]) 運算式時，如 length 等原生存取子，byteOffset 就不會在預覽中顯示。本次更新後，預覽畫面會顯示原生存取子，並在展開時即時評估值。

Chromium 問題：1076820、1199247

使用 #sourceURL 內嵌指令碼的適當錯誤堆疊追蹤

開發人員工具現在可以正確使用 #sourceURL 解析內嵌指令碼，並顯示適當的錯誤堆疊追蹤進行偵錯。

先前開發人員工具中的內嵌指令碼含有 #sourceURL (相對於前後文件)，而不是相對於開頭標記的 <script> 標記顯示的位置不正確。

Chromium 問題：1183990、578269

在「Computed」窗格中變更顏色格式

現在您可以在「運算」窗格中變更任何元素的顏色格式：Shift + 按一下顏色預覽畫面。

Chromium 問題：1226371

將自訂工具提示替換為原生 HTML 工具提示

開發人員工具現已在所有元件中採用原生 HTML 工具提示。由於缺少原生 HTML 工具提示的樣式，開發人員工具已長期使用自訂工具提示。

不過，維護自訂工具提示的操作十分複雜，我們經常遇到複雜的錯誤。

重新提高自訂實作項目的優點後，我們發現原生 HTML 工具提示就足以滿足開發人員工具的需求，且採用工具提示可避免使用者遇到各種問題。

Chromium 問題：1223391

[實驗功能] 在「問題」分頁中隱藏問題

啟用「隱藏問題選單」實驗功能，在「問題」分頁中隱藏問題。如此一來，您就能專心處理自己重視的重要問題。

在「問題」分頁中將遊標懸停在問題上，點選右側的問題選單 和「隱藏類似問題」即可隱藏。

Chromium 問題：1175722

下載預覽頻道

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

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

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

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

開發人員工具新功能

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