本頁面由 Cloud Translation API 翻譯而成。

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

Sofia Emelianova

尋找復活節彩蛋

為慶祝今年的愚人節，開發人員工具團隊在開發人員工具中的某處隱藏了一顆彩蛋。

如要找出圖片，請找出彩色的 💫? 表情符號。

元素面板更新

這個版本為「Elements」面板新增了幾項更新。

前往「元素」>「樣式」模擬聚焦頁面

「元素」 >「樣式」分頁標籤現在有「切換元素狀態」 (:hov) 按鈕下方的 check_box 「模擬聚焦的網頁」選項。先前您只能在「轉譯」面板中找到這個選項。

將焦點從頁面切換到開發人員工具時，有些疊加層元素是由焦點觸發時會自動隱藏。例如下拉式清單、選單或日期挑選器。「模擬聚焦的網頁」選項可讓您對目前聚焦的元素進行偵錯。

在「樣式」分頁中模擬聚焦頁面前後的前後對照。

Chromium 問題：1468393。

var() 備用項中的顏色挑選器、Angle Clock 和 Easing Editor

為簡化 CSS 編輯流程，「Elements」(元素) >「Styles」(樣式) 分頁現在可讓您在 var() 備用項中使用顏色挑選器、Angle Clock 和 Easing Editor。

顯示顏色挑選器、角度時鐘和 Easing Editor 工具的前後對照設定後，即在 var() 備用項目中呈現出來。

Chromium 問題：1520417。

CSS 長度工具已淘汰

CSS 長度編寫工具已淘汰，該工具會拖慢工作流程，不會創造太多價值，因此已淘汰。

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

如要重新啟用長度工具，請清除設定 > 實驗 > check_box 在「樣式」分頁中淘汰 CSS <length> 編寫工具。

如果您仍想使用這項工具，開發人員工具團隊想瞭解你的看法，以及說明長度工具對工作流程有何幫助。歡迎前往 crbug/1522657 提供意見回饋。

淘汰實驗已停用。

為了簡化搜尋作業，現在 [Performance] > [Main] 測試群組的火焰圖會在你瀏覽搜尋結果時，在對應的事件上方顯示彈出式視窗。

在所選搜尋結果上方和之後顯示彈出式視窗。

Chromium 問題：1523279。

網路面板更新

這個版本將幾項「Network」面板更新。

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

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

「封鎖」按鈕：用於清除表格中擷取的事件。
可解讀規則運算式的搜尋篩選器。

加入「清除」按鈕和搜尋篩選器的前後對照。

開發人員工具團隊想感謝 Charles Vazac 登陸這項功能。

此外，「EventStream」EventStream分頁現在也會擷取伺服器透過擷取/XHR 傳送的事件，而非僅擷取 EventSource API。您可以前往這個示範頁面試用看看。

Chromium 問題：1488863、40659493。

「聯播網」>「Cookie」中第三方 Cookie 豁免原因的工具提示

現在「聯播網」 >「Cookie」分頁會在逐步淘汰第三方 Cookie 遭封鎖的 Cookie 旁顯示工具提示，並提供豁免原因。

顯示工具提示，並附上第三方 Cookie 豁免原因。

允許第三方 Cookie 的可能原因如下：

Chrome Enterprise 政策
Storage Access API 或頂層 Storage Access API
逐步淘汰第三方 Cookie 的淘汰計畫或寬限期
第三方 Cookie 逐步淘汰經驗法則
使用者偏好設定

Chromium 問題：41491846。

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

「Sources」(來源) >「Breakpoints」區段將「Enable」和「Disable allBreakpoints」選項重新顯示在下拉式選單中。以前，這些選項在重新設計的中斷點之前遺漏。

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

Chromium 問題：1522037。

在 Node.js 適用的開發人員工具中查看已載入的指令碼

Node.js 適用的開發人員工具現在會在導覽樹狀結構中顯示已載入的指令碼 (依序點選「來源」 >「指令碼」)。

「Scripts」分頁新增前後對照，內含已載入指令碼的樹狀結構。

Chromium 問題：1518364。

Lighthouse 11.5.0 版本

Lighthouse 面板現在會執行 Lighthouse 11.5.0。查看完整異動清單。

許多重要變更是全新的稽核功能，可預估版面配置位移的根本原因。這項稽核會取代版面配置/元素稽核功能，只列出受版面配置位移影響的元素。

全新稽核功能，可預估版面配置位移的根本原因。

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

Chromium 問題：772558。

無障礙功能

這個版本改善了下列無障礙功能：

螢幕閱讀器現已推出：
- 在「Recorder」面板中，選取選取器類型旁的「Learn more」連結文字。
- 如果沒有實驗符合 [設定] > [實驗] 中的篩選器。
- 在「設定」的「設定」 >「捷徑」中移除、確認或還原捷徑時，系統必須顯示確認動作。
「設定」 >「位置」中的表格現在可正確顯示為無障礙工具表格。

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

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

開發人員工具中的字型已更新，以符合 Chrome (1523538)。
效能：修正游標懸停在時間軸上時顯示的螢幕截圖 (1519469)。
來源：編輯器中的行高已增加，讓程式碼更容易可讀 (1523640)。
「網路」 >「回應」：修正不同格式和編碼的各種顯示問題 (1523128、1509336、1523128、41481944、1509336)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

請透過 crbug.com 提交建議或意見回饋。
如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 >「說明」 >「回報開發人員工具的問題」。
在 @ChromeDevTools 張貼推文。
歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。