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

Sofia Emelianova
Sofia Emelianova
GitHub

錄音工具擴充功能的官方集錦已上架

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

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

改善網路

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

「狀態」欄中顯示失敗原因

「狀態」欄現在一律會顯示失敗原因。過去，您必須啟用 check_box「大型要求列」或在表格中選取要求。

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

Chromium 問題：1506760。

改良的「複製」子選單

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

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

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

Chromium 問題：1267033、1276452、798498。

提升執行效能

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

時間軸中的導覽標記

「Performance」面板頂端的「Timeline」現在可用來設定導覽標記，並在兩者之間任意切換。

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

Chromium 問題：1467739。

主測試群組中的活動發起者

「成效」>根據預設，「主要」軌跡會顯示連結啟動工具的箭頭及導致的後續事件。

  • 撤銷樣式或版面配置 ->重新計算樣式或版面配置
  • 要求動畫頁框 ->已觸發動畫頁框
  • 要求閒置回呼 ->火災閒置回呼
  • 安裝計時器 ->已觸發計時器
  • 建立 WebSocket ->Send... 以及 Receive WebSocket 握手或 Destroy WebSocket

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

由要求中的箭頭和閒置回呼觸發的箭頭。

Chromium 問題：1434596。

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

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

新增選單的前後比較，可用於選取 JavaScript VM 執行個體。

Chromium 問題：1511813。

改善元素

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

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

現在可在樣式中編輯 ::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。

為模擬的折疊式裝置提供防護機制

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

包含防護機制選項的下拉式選單。

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

Chromium 問題：1066842。

動態主題設定

開發人員工具現在會自動與 Chrome 的色彩主題搭配。如何設定主題：

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

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

Chromium 問題：1483276。

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

對於受到追蹤保護功能的第三方限制影響的 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)。
  • 成效：
    • 「Collect garbage」按鈕現在有適當的「mop」圖示而不是「bin」(1507530)。
    • 前往 about:blank 時，效能追蹤記錄現在會保留資料 (1509947)。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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