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

官方錄音工具擴充功能已上線

這款錄音工具擴充功能的官方版報告現已上線。

如要直接從「錄音器」開啟集合，請在「錄音器」面板頂端的動作列中，依序選取「下載」「匯出」>「取得擴充功能...」。

網路改善

這個版本為「網路」面板進行多項改善。

「狀態」欄中的失敗原因

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

Chromium 問題：1506760。

改善「複製」子選單

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

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

Chromium 問題：1267033、1276452、798498。

提升執行效能

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

時間軸中的導覽標記

您現在可以透過「成效」面板頂端的「時間軸」設定麵包屑，並在各麵包屑之間跳轉。

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

Chromium 問題：1467739。

主軌道中的事件啟動條件

系統現在預設會在「Performance」 >「Main」追蹤記錄中，顯示箭頭連結啟動事件和事件所觸發的後續事件。

• 樣式或版面配置無效 -> 重新計算樣式或「版面配置」
• 要求動畫頁框 -> 動畫頁框已觸發
• 要求閒置回呼 -> 觸發閒置回呼
• 安裝計時器 -> 已觸發計時器
• 依序點選 [建立 WebSocket] -> [Send...] 和 [Receive WebSocket Handshake] 或 [Destroy WebSocket]

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

Chromium 問題：1434596。

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

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

Chromium 問題：1511813。

元素改善項目

這個版本為「元素」面板推出多項改善功能。

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

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

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

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

Chromium 問題：1511233。

支援區塊容器的 align-content 屬性

align-content 屬性現在可搭配任何區塊容器 (包括 table-caption 和 table-cell) 使用。先前僅適用於格線和 Flex，

Chromium 問題：1500511。

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

現在可以按下 Cmd (Mac) / Ctrl (Win) + Shift 鍵，然後按一下來源中的行號來建立記錄點。這個快速鍵是針對條件中斷點新增的功能，可搭配 Cmd (Mac) / Ctrl (Win) 鍵 + 點選使用。

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

Chromium 問題：1486933、1467464。

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

裝置模式現在可讓您設定模擬折疊式裝置的型態：持續或折疊。連續型態是指「平板」位置，而摺疊在螢幕各節之間形成一個角度。

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

Chromium 問題：1066842。

動態主題設定

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

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

Chromium 問題：1483276。

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

Network 和 Application 面板現在都會在受 追蹤防護第三方限制影響的 Cookie 旁邊醒目顯示並顯示警告。

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

在「應用程式」中，依序前往「儲存空間」>「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)。
• 網路：
  • 標頭覆寫值：修正「標頭」分頁中出現錯誤的紫色圓點圖示 (1507856)。
  • 預覽：修正了不必要的雙重解碼錯誤 (1509336)。
  • 修正無法顯示短要求的錯誤 (1509862)。
• 「Application」>「IndexedDB」：重新排列動作列中的按鈕，使其與其他面板保持一致 (1393800)。
• 感應器：修正了無法使用位置的錯誤，回呼成功但位置不正確 (1486859)。
• 成效：
  • 「Collect garbage」按鈕現在有了適當的圖示，該圖示為「mop」而非「bin」(1507530)。
  • 效能追蹤現在會在前往 about:blank 時保留資料 (1509947)。

下載預覽頻道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。