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

錄音工具擴充功能正式上線

匯出和重播錄製工具擴充功能的官方集合現已上線。

如要直接從「記錄器」開啟集合，請依序選取「下載」「匯出」 >「取得擴充功能...」，這幾個選項位於「記錄器」面板頂端的動作列。

網路改善

這個版本對「網路」面板進行了多項改良。

「狀態」欄中的失敗原因

「狀態」欄現在一律會顯示失敗原因。先前，您必須開啟「check_box」check_box大型要求資料列，或選取表格中的要求。

Chromium 問題：1506760。

改良版「複製」子選單

要求的「複製」子選單現在更有條理。

此外，Windows 版的「複製為 cURL 格式」選項現在會將正確的指令複製到剪貼簿。

Chromium 問題：1267033、1276452、798498。

提升執行效能

這個版本對「效能」面板進行了多項改良。

時間軸中的導覽標記

「成效」面板頂端的「時間軸」現在可讓您設定路徑點，並在這些路徑點之間跳轉。

如要設定導覽標記，請在「時間軸」上選取範圍，將游標懸停在該範圍上，然後按一下「N 毫秒」zoom_in 按鈕。您可以連續建立多個巢狀麵包屑。如要在縮放等級之間切換，請點選「時間軸」上方鏈結中的相應階層連結。觀看下一部影片，瞭解麵包屑的實際運作情形。

Chromium 問題：1467739。

主要軌中的事件啟動器

「成效」>「主要」軌預設會顯示箭頭，連結啟動器和後續事件。

• 樣式或版面配置失效 -> 重新計算樣式或版面配置
• 要求動畫頁框 -> 已觸發動畫頁框
• 要求閒置回呼 -> 觸發閒置回呼
• 安裝計時器 -> 已觸發計時器
• 「建立 WebSocket」->「傳送...」和「接收 WebSocket 握手」或「刪除 WebSocket」

如要查看箭頭，請在追蹤記錄中找出這類事件並點選，這項功能先前為實驗功能。

Chromium 問題：1434596。

Node.js 開發人員工具的 JavaScript VM 執行個體選取器選單

在 Node.js 開發人員工具的「效能」面板中，您現在可以從動作列的對應下拉式選單中選取 JavaScript VM 執行個體。即將淘汰的 JavaScript 分析器也提供類似功能。

Chromium 問題：1511813。

元素改善

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

除了上述兩項功能外，「元素」面板現在還會記住您上次開啟的分頁，例如「已計算」或「屬性」。

現在可以在「樣式」中編輯 ::view-transition 虛擬元素

您現在可以使用檢查器樣式表，在「樣式」中編輯 ::view-transition CSS 虛擬元素。

詳情請參閱「使用 View Transitions API 實現流暢簡單的轉場效果」。

Chromium 問題：1511233。

封鎖容器的 align-content 屬性支援

align-content 屬性現在適用於任何區塊容器，包括 table-caption 和 table-cell。先前僅適用於格線和彈性。

Chromium 問題：1500511。

「來源」中的新快速鍵和指令

現在只要在「來源」中按 Cmd (Mac) / Ctrl (Win) + Shift 鍵並點選行號，即可建立記錄點。除了現有的 Cmd (Mac) / Ctrl (Win) + 點按條件式中斷點，現在還新增了這項快速鍵。

指令選單新增「在導覽工具側欄中顯示使用中的檔案」指令，功能與編輯器下拉式選單中的對應選項相同。

Chromium 問題：1486933、1467464。

模擬折疊式裝置的姿勢支援

裝置模式現在可讓您設定模擬摺疊式裝置的型態：「連續」或「摺疊」。「連續」姿勢是指「平放」位置，而「摺疊」姿勢是指螢幕各部分之間形成角度。

此外，「裝置」清單新增了模擬的摺疊式裝置：Asus Zenbook Fold。

Chromium 問題：1066842。

動態主題

開發人員工具現在會自動配合 Chrome 的色彩主題。如要設定主題，請按照下列步驟操作：

1. 開啟新分頁，然後按一下右下角的「編輯」「自訂 Chrome」。
2. 在「外觀」中，透過「桌布」變更主題選取主題，或選取調色盤。

Chromium 問題：1483276。

「網路」和「應用程式」面板中的第三方 Cookie 淘汰警告

「網路」和「應用程式」面板現在會醒目顯示受「追蹤保護」第三方限制影響的 Cookie，並在旁邊顯示警告。

在「網路」中，找出含有警告警告圖示的要求，按一下該要求，然後開啟「Cookie」分頁。

在「應用程式」中，依序前往「儲存空間」 >「Cookie」，然後按一下網域。以黃色醒目顯示的 Cookie 不會儲存在瀏覽器中。

將滑鼠游標懸停在警告圖示上，即可查看說明問題的工具提示，按一下圖示則會開啟「問題」分頁，顯示更多資訊。

此外，表格中的 Cookie 現在預設會依名稱排序。

Chromium 問題：1506225、1503961。

Lighthouse 11.4.0

「Lighthouse」面板現在會執行 Lighthouse 11.4.0。如需完整變更清單，請參閱這篇文章。其中一項重大變更就是新增稽核功能，可偵測網站是否仍使用第三方 Cookie。

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

Chromium 問題：772558。

無障礙設定

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

• 開啟設定 設定 > 實驗 時，系統現在會自動將焦點放在「搜尋」方塊。
• 「網路」>「篩選器」中的「取消」「清除輸入」按鈕現在可供聚焦。
• 「來源」 >「頁面」中的檔案樹狀結構現在會以高對比模式正確顯示。
• 螢幕閱讀器現在可以正確朗讀以下內容：
  • 「來源」 >「中斷點」中的核取方塊狀態。
  • 建議清單的位置和索引資訊。
  • 在「設定」設定 >「地點」中新增或刪除地點時，系統會傳回動作結果。
  • 設定中的排除規則群組 (一般或自訂)設定 >「忽略清單」。

Chromium 問題：1504938、1499868、1512161、1515224、1515418、1516998、1517015。

其他重點

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

• 動畫：
  • 修正螢幕截圖彈出式視窗超出邊界的錯誤 (1506991)。
  • 修正已移除的動畫節點未標示為已移除的錯誤 (1506561)。
• 網路：
  • 覆寫標頭：修正「Headers」分頁中出現錯誤紫色點圖示的錯誤 (1507856)。
  • 預覽版：修正不必要的雙重解碼錯誤 (1509336)。
  • 修正導致無法顯示簡短要求的錯誤 (1509862)。
• 應用程式 > IndexedDB：重新排列動作列中的按鈕，與其他面板保持一致 (1393800)。
• 感應器：修正位置資訊無法使用時，回呼成功但資訊不正確的錯誤 (1486859)。
• 成效：
  • 「Collect garbage」(收集垃圾) 按鈕現在會顯示適當的圖示「拖把」，而非「垃圾桶」(1507530)。
  • 現在導覽至 about:blank 時，效能追蹤會保留資料 (1509947)。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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