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

Jecelyn Yeen

以偏好語言使用開發人員工具

Chrome 開發人員工具現在支援超過 80 種語言，讓您以偏好的語言進行工作！

開啟「設定」，然後在「偏好設定」 >「語言」下拉式選單中選取所需語言，然後重新載入 DevTools。

Preferences" width="800" height="494">

Chromium 問題：1163928

裝置清單中的新 Nest Hub 裝置

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

按一下「切換裝置工具列」圖示 ，然後在裝置清單下方選取 Nest Hub 或 Nest Hub Max。

Chromium 問題：1223525

「Frame」詳細資料檢視畫面中的原生試播

您現在可以在「應用程式」面板下方的框架詳細資料檢視畫面中，取得網站原點測試相關資訊。

來源試用可讓您使用新功能或實驗功能，在正式推出前先讓使用者試用一段時間。

開啟含有來源測試的頁面 (例如示範頁面)。在「應用程式」面板中，向下捲動至「影格」部分，然後選取頂端影格。

Chromium 問題：607555

新 CSS 容器查詢徽章

容器元素 (符合 @container at-rule 條件的祖系元素) 旁邊會新增新的容器徽章。按一下徽章，即可切換顯示所選容器的疊加層，以及頁面上所有查詢的子項。

Chromium 問題：1146422

可用於反轉網路篩選器的全新核取方塊

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

舉例來說，您可以輸入「status-code: 404」，篩除狀態為 404 的網路要求。啟用「Invert」核取方塊，即可反轉篩選條件 (顯示所有非狀態 404 的網路要求)。

Chromium 問題：1054464

主控台側欄即將淘汰

我們會移除主控台側欄，並將篩選器 UI 移至工具列。您是否有任何疑慮或意見回饋？請透過這個問題追蹤工具告訴我們。

Chromium 問題：1232937

在「Issues」分頁和「Network」面板中顯示原始 Set-Cookie 標頭

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

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

Chromium 問題：1179186

在控制台中一致顯示原生存取子，做為自身的屬性

控制台現在會一律將原生存取子顯示為自身的屬性。

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

Chromium 問題：1076820、1199247

針對含有 #sourceURL 的內嵌指令碼，提供適當的錯誤堆疊追蹤

開發人員工具現在可正確解析內嵌 #sourceURL 的程式碼，並顯示適當的錯誤堆疊追蹤記錄，以利偵錯。

先前開發人員工具會顯示內嵌指令碼的錯誤位置，與周圍文件相關，而非與開頭 <script> 標記相關。#sourceURL

Chromium 問題：1183990、578269

在「計算」窗格中變更顏色格式

您現在可以按住 Shift 鍵並點選顏色預覽畫面，變更「Computed」窗格中任何元素的顏色格式。

Chromium 問題：1226371

使用原生 HTML 工具提示取代自訂工具提示

開發人員工具現在會在所有元件中採用原生 HTML 工具提示。由於原生 HTML 工具提示缺少樣式，開發人員工具已實作自訂工具提示很長一段時間。

很抱歉，維護自訂工具提示實作方式相當複雜，而且我們經常遇到複雜的錯誤。

重新評估自訂導入方式的優點後，我們發現原生 HTML 工具提示就足以滿足 DevTools 的需求，而且採用工具提示可避免使用者遇到各種問題。

Chromium 問題：1223391

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

啟用「隱藏問題選單」實驗，即可隱藏「問題」分頁中的問題。這樣一來，您就能專注處理重要的問題。

在「Issue」分頁中，將滑鼠游標懸停在問題上，按一下右側的問題選單  ，然後選取「Hide issues like this」即可隱藏問題。

Chromium 問題：1175722

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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