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

Jecelyn Yeen

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

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

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

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

Chromium 問題：1163928

裝置清單中的新 Nest Hub 裝置

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

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

Chromium 問題：1223525

「Frame details」(框架詳細資料) 檢視畫面中的 Origin 試用

您現在可以在「應用程式」面板下的影格詳細資料檢視畫面中，取得網站的原始碼試用資訊。

來源試用可讓您使用新功能或實驗功能，建構使用者可在功能正式推出前試用的功能。

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

Chromium 問題：607555

全新 CSS 容器查詢徽章

系統會在容器元素 (符合 @container at 規則條件的祖先元素) 旁新增容器徽章。按一下徽章，即可在頁面上切換顯示所選容器和所有查詢後代的疊加層。

Chromium 問題：1146422

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

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

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

Chromium 問題：1054464

控制台側欄即將淘汰

系統將移除主控台側欄，並將篩選條件 UI 移至工具列。如有任何疑慮或意見，歡迎透過這個 Issue Tracker 告訴我們。

Chromium 問題：1232937

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

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

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

Chromium 問題：1179186

在控制台中，將原生存取子項一律顯示為自有屬性

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

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

Chromium 問題：1076820、1199247

使用 #sourceURL 的內嵌指令碼可取得正確的錯誤堆疊追蹤

開發人員工具現在會正確解析內嵌指令碼 (使用 #sourceURL)，並顯示正確的錯誤堆疊追蹤記錄以供偵錯。

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

Chromium 問題：1183990、578269

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

現在只要按住 Shift 鍵並點選顏色預覽，即可變更「已計算」窗格中任何元素的顏色格式。

Chromium 問題：1226371

以原生 HTML 提示取代自訂提示

開發人員工具現在會在所有元件中採用原生 HTML 工具提示。由於原生 HTML 提示缺少樣式，開發人員工具長期以來都採用自訂提示實作。

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

重新評估自訂實作的優點後，我們發現原生 HTML 工具提示足以支援開發人員工具，採用工具提示可避免使用者遇到各種問題。

Chromium 問題：1223391

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

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

在「問題」分頁中，將游標懸停在問題上，按一下右側的問題選單   ，然後選取「隱藏類似問題」即可隱藏。

Chromium 問題：1175722

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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