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

尋找彩蛋

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

如要尋找這項功能，請尋找彩色的 💫 表情符號。

「元素」面板更新

這個版本對「元素」面板進行了多項更新。

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

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

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

Chromium 問題：1468393。

var() 後備中的顏色挑選器、角度時鐘和緩和效果編輯器

為簡化 CSS 編輯作業，您現在可以在「元素」>「樣式」分頁中，使用色彩挑選器、角度時鐘和緩和效果編輯器，以 var() 回退。

Chromium 問題：1520417。

CSS 長度工具已淘汰

由於使用者回報 CSS 長度撰寫工具會拖慢工作流程，且沒有太大價值，因此我們已淘汰這項工具。

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

如要重新啟用長度工具，請依序前往「設定」「實驗」，然後取消勾選「在『樣式』分頁中停用 CSS <length> 撰寫工具」。

如果您仍想使用這項工具，開發人員工具團隊很想聽聽您的意見，以及長度工具如何協助您完成工作流程。歡迎在 crbug/1522657 中提供意見回饋。

「成效」>「主要測試群組」中，所選搜尋結果的彈出式視窗

為方便搜尋，當您在「效能」 >「主要」軌中瀏覽搜尋結果時，火焰圖現在會在對應事件上方顯示快顯視窗。

Chromium 問題：1523279。

網路面板更新

這個版本為「網路」面板帶來幾項更新。

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

「網路」 >「EventStream」分頁會顯示：

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

開發人員工具團隊要感謝 Charles Vazac 推出這項功能。

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

Chromium 問題：1488863、40659493。

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

「Network」 >「Cookies」分頁現在會顯示工具提示，說明原本應因第三方 Cookie 淘汰而遭到封鎖的 Cookie 豁免原因。

第三方 Cookie 可能因下列原因而遭到允許：

• Chrome Enterprise 政策
• Storage Access API 或 top-level Storage Access API
• 第三方 Cookie 逐步淘汰試用計畫或寬限期
• 逐步淘汰第三方 Cookie 的啟發式方法
• 使用者偏好設定

Chromium 問題：41491846。

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

「來源」 >「中斷點」部分會將「啟用」和「停用所有中斷點」選項放回下拉式選單。先前重新設計中斷點時，這些選項遭到排除。

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

Chromium 問題：1522037。

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

Node.js 的開發人員工具現在會在「來源」 >「指令碼」的導覽樹狀結構中，顯示已載入的指令碼。

Chromium 問題：1518364。

Lighthouse 11.5.0

「Lighthouse」面板現在會執行 Lighthouse 11.5.0。請參閱完整異動清單。

其中一項重大變更，就是新增稽核功能，可估算版面配置變動的根本原因。這項稽核會取代版面配置位移元素稽核，後者只會列出受版面配置位移影響的元素。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：772558。

無障礙設定

這個版本在無障礙功能方面有以下改善：

• 螢幕閱讀器現在會播報：
  • 「記錄器」面板中選取器類型旁的「瞭解詳情」連結文字。
  • 當「設定」設定 >「實驗」中沒有符合篩選條件的實驗時。
  • 在「設定」設定 >「快速鍵」中移除、確認或還原快速鍵時，系統會要求確認操作。
• 「設定」 >「地點」中的表格現在會正確顯示為表格，方便使用輔助工具。

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

其他亮點

這個版本的重要修正和改良項目包括：

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

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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