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

Sofia Emelianova
Sofia Emelianova
GitHub

尋找復活節彩蛋

慶祝今年的愚人節天，開發人員工具團隊已在開發人員工具中的某個位置隱藏了復活節彩蛋。

只要尋找彩色的 💫? 表情符號，即可找到所需內容。

「元素」面板更新

這個版本為「Elements」面板推出多項更新。

在「元素」中模擬聚焦網頁 >風格

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

如果您將焦點從頁面切換至開發人員工具，當焦點觸發某些重疊元素時，這些元素會自動隱藏。例如：下拉式選單、選單或日期挑選器。「模擬聚焦網頁」選項可讓您對這類元素進行偵錯，就像該元素位在焦點一樣。

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

Chromium 問題：1468393。

var() 備用項目中的顏色挑選器、角度時鐘和加/減速編輯器

為了簡化 CSS 編輯流程，元素 >「樣式」分頁現在可讓您在 var() 備用方案中使用顏色挑選器、角度時鐘和加/減速編輯器。

在 var() 備用選項中轉譯顏色挑選器、角度時鐘和加/減速編輯器工具的前後差異。

Chromium 問題：1520417。

CSS 長度工具已淘汰

CSS 長度編寫工具因使用者的意見回饋會拖慢工作流程，且無法帶來太多價值，因此已淘汰。

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

如要重新開啟時間長度工具，請清除「設定」中的「設定」>實驗 >check_box 淘汰 CSS <length>「樣式」分頁中的創作工具

如果您仍想使用這項工具，開發人員工具團隊希望瞭解您的意見，以及這項工具可如何協助您工作流程。歡迎前往 crbug/1522657 提供意見。

淘汰實驗已關閉。

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

為簡化搜尋作業，請點選「成效」中的火焰圖 >瀏覽搜尋結果時，主要軌跡現在會在對應事件上方顯示彈出式視窗。

在所選搜尋結果上，之前和之後的彈出式視窗。

Chromium 問題：1523279。

網路面板更新

這個版本為「網路」面板進行一些更新。

清除聯播網中的按鈕和搜尋篩選器 >EventStream 分頁

網路 >EventStream「EventStream」分頁提供下列內容：

  • 區塊「清除」按鈕，會清除表格中擷取的事件。
  • 能夠解讀規則運算式的搜尋篩選器。

新增「清除」按鈕和搜尋篩選器的「之前」和「之後」。

感謝開發人員工具團隊感謝 Charles Vazac 引領這項功能。

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

Chromium 問題：1488863、40659493。

提供聯播網中第三方 Cookie 豁免原因的工具提示 >餅乾

網路 >「Cookie」分頁現在會在應遭第三方 Cookie 逐步淘汰的 Cookie 旁邊顯示工具提示，其中包含豁免原因。

前後對照工具提示，說明使用第三方 Cookie 的豁免原因。

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

Chromium 問題：41491846。

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

來源 >「Breakpoints」區段會在下拉式選單中傳回「Enable」和「Disable allBreakpoints」選項。先前，中斷點重新設計並未提供這些選項。

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

恢復啟用和停用選項的前後對照圖。

Chromium 問題：1522037。

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

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

「Scripts」分頁新增的前後位置和載入後指令碼樹狀結構。

Chromium 問題：1518364。

Lighthouse 11.5.0

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

值得注意的變化之一是新的稽核報告，可用於預估版面配置位移的根本原因。這項稽核會取代版面配置轉移元素的稽核作業，只列出受到版面配置位移影響的元素。

新的稽核作業會預估版面配置位移的根本原因。

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

Chromium 問題：772558。

無障礙設定

這個版本有下列無障礙功能改善項目：

  • 螢幕閱讀器現已朗讀：
    • 在「Recorder」面板中，選取器類型旁邊的「瞭解詳情」連結文字。
    • 如果沒有實驗符合設定「設定」中的篩選條件 >實驗。
    • 在設定的「設定」中移除、確認或還原捷徑時，系統會確認動作快速鍵：
  • 設定「設定」中的表格 >位置現在可正確轉譯為無障礙工具表格。

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

其他精選內容

這個版本包含多項重要修正和改善項目：

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。