開發人員工具的新功能 (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

尋找彩蛋

為慶祝今年的愚人節，DevTools 團隊在 DevTools 中隱藏了復活節彩蛋。

如要找到該圖示，請尋找色彩繽紛的 💫? 表情符號。

「元素」面板更新

這個版本對「Elements」面板進行了幾項更新。

在「元素」>「樣式」中模擬已聚焦的網頁

「Elements」 >「Styles」分頁現在在「Toggle elements state」 (切換元素狀態) 按鈕下方有「Emulate a focused page」 選項。:hov先前您只能在「算繪」面板中找到這個選項。

如果您將焦點從網頁切換至開發人員工具，部分疊加元素會在受到焦點觸發時自動隱藏。例如下拉式清單、選單或日期挑選器。您可以使用「模擬已聚焦的網頁」選項，針對這類元素進行偵錯，就像是該元素處於聚焦狀態一樣。

在「Styles」分頁中模擬聚焦頁面前後的效果。

Chromium 問題：1468393。

var() 備用方案中的顏色挑選器、角度時鐘和 Easing 編輯器

為簡化 CSS 編輯作業，現在在 Elements > Styles 分頁中，您可以在 var() 備用方案中使用 Color Picker、Angle Clock 和 Easing Editor。

在 var() 備用方案中，顯示渲染前後的顏色挑選器、角度時鐘和 Easing Editor 工具。

Chromium 問題：1520417。

CSS 長度工具已淘汰

由於有意見指出 CSS 長度製作工具會減緩工作流程且沒有太大價值，因此已淘汰該工具。

您無法再拖曳調整值，或從下拉式選單中選取單位類型。請改為按兩下該值，然後輸入新的值。

如要重新啟用長度工具，請清除「設定」 >「實驗」 >「核取方塊」「Deprecate CSS <length> authoring tool in the Styles tab」。

如果您仍想使用這項工具，DevTools 團隊希望瞭解您的意見，以及長度工具如何協助您改善工作流程。歡迎在 crbug/1522657 中提供意見回饋。

停用淘汰實驗。

「成效」>「主要」追蹤中所選搜尋結果的彈出式視窗

為方便搜尋，當您瀏覽搜尋結果時，「Performance」 >「Main」追蹤中的火焰圖表，現在會在對應事件上方顯示彈出式視窗。

在選取的搜尋結果上方顯示彈出式視窗前後的畫面。

Chromium 問題：1523279。

網路面板更新

這個版本對「Network」面板進行了幾項更新。

「網路」>「EventStream」分頁中的清除按鈕和搜尋篩選器

「Network」 >「EventStream」分頁會取得：

  • 清除表格中已擷取事件的 清除按鈕。
  • 可解讀規則運算式的搜尋篩選條件。

新增清除按鈕和搜尋篩選器前後的畫面。

開發人員工具團隊要感謝 Charles Vazac 為我們帶來這項功能。

此外，EventStream 分頁現在除了 EventSource API 外，還會擷取伺服器透過 fetch/XHR 傳送的事件。歡迎前往這個示範頁面試用。

Chromium 問題：1488863、40659493。

在「Network」>「Cookies」中，第三方 Cookie 的免除理由顯示工具提示

「Network」 >「Cookies」分頁現在會在 Cookie 旁邊顯示工具提示，說明為何 Cookie 可免於第三方 Cookie 淘汰計畫的影響。

第三方 Cookie 的免除原因提示方塊顯示前後的比較圖。

第三方 Cookie 可能會因為以下原因而獲得許可：

Chromium 問題：41491846。

啟用及停用「來源」中的所有中斷點

「Sources」 >「Breakpoints」部分會將「Enable」和「Disable all breakpoints」選項加入下拉式選單。先前，這些選項在中斷點重新設計後已遭到省略。

如要啟用或停用所有中斷點，請在「Sources」 >「Breakpoints」中按一下滑鼠右鍵，然後選取對應的選項。

啟用和停用選項的顯示/隱藏前後。

Chromium 問題：1522037。

在 Node.js 的 DevTools 中查看已載入的指令碼

Node.js 的 DevTools 現在會在「Sources」 >「Scripts」的導覽樹狀結構中，顯示已載入的指令碼。

新增「指令碼」分頁後，載入的指令碼樹狀結構會顯示在分頁中。

Chromium 問題：1518364。

Lighthouse 11.5.0

Lighthouse 面板現在執行 Lighthouse 11.5.0。請參閱完整變更清單。

其中一個重大變更是新增稽核作業，用於估算版面配置變動的原因。這項稽核作業取代了版面配置轉移元素稽核作業，後者只會列出受版面配置轉移影響的元素。

新的稽核作業，可預估版面配置變更的根本原因。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

無障礙設定

這個版本包含下列無障礙功能改善措施：

  • 螢幕閱讀器現在會朗讀：
    • 錄製器面板中選取器類型旁的「Learn more」連結文字。
    • 在「設定」 >「實驗」中，找不到符合篩選條件的實驗。
    • 在的「設定」 >「捷徑」中移除、確認或還原捷徑時，顯示的動作確認訊息。
  • 設定 > 位置 中的表格現在會正確顯示為無障礙工具的表格。

Chromium 問題：1516957、324282443、324467508、324930007。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • 開發人員工具中的字型會更新為與 Chrome 相符 (1523538)。
  • 效能：修正在時間軸上方游標時顯示的螢幕截圖 (1519469)。
  • 來源：編輯器中的行高已提高，方便閱讀程式碼 (1523640)。
  • 網路 > 回應：修正各種顯示問題，包括不同格式和編碼 (1523128、1509336、1523128、41481944、1509336)。

下載預覽管道

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

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

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

開發人員工具的新功能

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