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

Sofia Emelianova
Sofia Emelianova
GitHub

尋找復活節彩蛋

為慶祝今年的愚人節，開發人員工具已在開發人員工具中隱藏了復活節彩蛋。

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

「元素」面板更新

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

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

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

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

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

Chromium 問題：1468393。

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

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

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

Chromium 問題：1520417。

CSS 長度工具已淘汰

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

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

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

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

淘汰實驗已關閉。

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

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

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

Chromium 問題：1523279。

網路面板更新

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

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

「網路」 >「EventStream」分頁可取得：

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

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

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

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

Chromium 問題：1488863、40659493。

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

「網路」 >「Cookie」分頁現在會在 Cookie 旁邊顯示工具提示，說明應遭淘汰第三方 Cookie 封鎖的 Cookie。

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

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

Chromium 問題：41491846。

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

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

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

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

Chromium 問題：1522037。

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

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

「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 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59