開發人員工具的新功能 (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。

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

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

  • 無效的樣式或版面配置 ->「重新計算樣式」或「版面配置」
  • 「Request Animation Frame」->「Animation Frame Fired」
  • 「要求閒置回呼」->「Fire 閒置回呼」
  • 「Install Timer」->「Timer Fired」
  • 依序點選 [建立 WebSocket] -> [Send...] 和 [Receive WebSocket Handshake] 或 [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) / Cmd (Win) + Cmd 鍵，然後按一下來源中的行號來建立記錄點。這個快速鍵已新增至現有 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)。
  • 「Application」 >「IndexedDB」：重新排列動作列中的按鈕，使其與其他面板保持一致 (1393800)。
  • 感應器：修正無法使用位置功能，導致回呼成功回呼的錯誤 (1486859)。
  • 效能：
    • 「Collect garbage」按鈕現在有了適當的圖示，該圖示為「mop」而非「bin」(1507530)。
    • 前往 about:blank 時，效能追蹤記錄現在會保留資料 (1509947)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59