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

Sofia Emelianova
Sofia Emelianova
GitHub

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

官方匯出和重播 Recorder 擴充功能現已上線。

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

網路改善

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

「狀態」欄中的失敗原因

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

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

Chromium 問題：1506760。

改善「複製」子選單

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

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

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

Chromium 問題：1267033、1276452、798498。

提升執行效能

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

時間軸中的導覽標記

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

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

Chromium 問題：1467739。

主軌道中的事件啟動條件

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

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

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

來自要求的箭頭，以及閒置回呼的觸發。

Chromium 問題：1434596。

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

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

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

Chromium 問題：1511813。

元素改善項目

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

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

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

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

支援檢視畫面轉場虛擬元素的編輯前後狀態。

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

Chromium 問題：1511233。

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

align-content 屬性現在可搭配任何區塊容器 (包括 table-caption 和 table-cell) 使用。先前這項功能僅支援 div 和 flex。

在區塊容器中支援 align-content 的 before 和 after。

Chromium 問題：1500511。

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

您現在可以按下 Cmd (Mac) / Ctrl (Win) + Shift + 點選「Sources」中的行號，即可建立記錄點。這個快速鍵是針對條件中斷點新增的功能，可搭配 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」分頁。

在「Network」面板中擷取第三方 Cookie 前後的畫面。

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

在「應用程式」面板中，前後兩張圖片分別顯示第三方 Cookie 的醒目顯示效果。

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

此外，表格中的 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)。
  • 成效：
    • 「收集垃圾」按鈕現在已採用適當的圖示「拖把」(mop)，而非「垃圾桶」(bin) (1507530)。
    • 效能追蹤現在會在前往 about:blank 時保留資料 (1509947)。

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。