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

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

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

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

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

Chromium 問題:1163928

裝置清單中的新 Nest Hub 裝置

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

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

Nest Hub 裝置在裝置模式下

Chromium 問題:1223525

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

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

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

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

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

Chromium 問題:607555

新 CSS 容器查詢徽章

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

CSS 容器查詢徽章

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」面板。

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

Chromium 問題:1179186

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

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

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

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

Chromium 問題:10768201199247

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

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

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

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

Chromium 問題:1183990578269

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

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

按住 Shift 鍵再點選顏色預覽畫面,即可變更顏色格式

Chromium 問題:1226371

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

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

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

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

開發人員工具提示

Chromium 問題:1223391

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

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

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

實驗性隱藏問題內容選單

Chromium 問題:1175722

下載預覽管道

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

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

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

開發人員工具的新功能

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