本頁面由 Cloud Translation API 翻譯而成。

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

Sofia Emelianova

錄音工具擴充功能已正式推出

匯出和重播錄音工具擴充功能現已正式推出。

如要直接從「錄音工具」開啟珍藏內容，請在「錄音工具」面板頂端的動作列中，依序選取「下載」>「取得擴充功能...」。

改善網路

這個版本為「網路」面板提供了多項改善功能。

「狀態」欄中的失敗原因

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

之前和之後在「狀態」欄中顯示失敗的原因。

Chromium 問題：1506760。

改良的「複製」子選單

要求的「複製」子選單現在經過更井然有序。

改善「複製」子選單的前後對照。

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

Chromium 問題：1267033、1276452、798498。

提升執行效能

這個版本包含多項改善「Performance」(效能) 面板。

時間軸中的導覽標記

現在，您可以透過「效能」面板頂端的「時間軸」設定導覽標記，並在標記之間切換。

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

Chromium 問題：1467739。

主要測試群組中的活動發起人

根據預設，[成效] > [主要] 軌道會顯示用來連接啟動條件的箭頭，以及下列事件造成的箭頭。

樣式或版面配置無效 ->「重新計算樣式」或「版面配置」
「Request Animation Frame」->「Animation Frame」
「Request Idle Callback」(要求閒置回呼) ->「Fire Idle Callback」
[安裝計時器] -> [已觸發計時器]
建立 WebSocket ->「傳送...」和「接收 WebSocket 握手」或「刪除 WebSocket」

如要查看箭頭，請在追蹤記錄中尋找這類事件，然後按一下該事件。這項功能先前仍在實驗階段，

要求的箭頭並啟動閒置回呼。

Chromium 問題：1434596。

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

前後新增的選單可讓您選取 JavaScript VM 執行個體。

Chromium 問題：1511813。

改善元素

這個版本為「Elements」面板帶來了多項改善。

除了後兩個功能外，「Elements」面板現在會記住您最後開啟的分頁，例如「Computed」或「Properties」。

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

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

前後編輯支援檢視畫面轉換虛擬元素。

詳情請參閱「使用 View Transitions API 進行流暢和簡單的轉換」。

Chromium 問題：1511233。

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

align-content 屬性現在可與任何區塊容器搭配使用，包括 table-caption 和 table-cell。以往，它只能支援格線和 Flex。

區塊容器的前後對齊內容支援。

Chromium 問題：1500511。

「來源」中的新捷徑和指令

您現在可以按下 Cmd 鍵 (Mac) / Cmd (Win) + Cmd 鍵，接著點選「來源」中的行號，即可建立記錄點。這個快速鍵是由現有的 Cmd (Mac) / Ctrl (Win) + 點選 (條件中斷點) 新增。

「指令選單」可取得新的「在導覽器側欄中顯示有效檔案」指令，它與「編輯器」下拉式選單中的對應選項相同。

新指令會在導覽器側欄中顯示使用中的檔案。

Chromium 問題：1486933、1467464。

模擬摺疊式裝置的防護機制

裝置模式現在可讓您設定模擬摺疊式裝置的「正面」選項：「連續」或「摺疊」。連續型態是指「平坦」位置，折疊後形成螢幕區段之間的角度。

包含 Posture 選項的下拉式選單。

此外，「裝置」清單還會取得新的模擬折疊式裝置：Asus Zenbook Fold。

Chromium 問題：1066842。

動態主題設定

開發人員工具現在會自動與 Chrome 的顏色主題相符。如何設定主題：

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

開發人員工具會與在「外觀」中選取的顏色主題相符。

Chromium 問題：1483276。

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

「聯播網」和「應用程式」面板現在都會醒目顯示，並在受到 Tracking Protection 的第三方限制影響的 Cookie 旁顯示警告。

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

在「網路」面板中擷取第三方 Cookie 的前後對照。

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

「應用程式」面板中醒目顯示第三方 Cookie 的前後對照。

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

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

Chromium 問題：1506225、1503961。

Lighthouse 11.4.0 版本

Lighthouse 面板現在會執行 Lighthouse 11.4.0。查看完整異動清單。透過新推出的稽核功能，您可以偵測網站是否仍在使用第三方 Cookie，有許多重要的異動。

偵測第三方 Cookie 的稽核。

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

Chromium 問題：772558。

無障礙功能

這個版本改善了下列無障礙功能：

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

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

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

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

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

請透過 crbug.com 提交建議或意見回饋。
如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 >「說明」 >「回報開發人員工具的問題」。
在 @ChromeDevTools 張貼推文。
歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。