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

Sofia Emelianova
Sofia Emelianova

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

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

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

改善網路

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

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

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

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

Chromium 問題:1506760

改良的「複製」子選單

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

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

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

Chromium 問題:12670331276452798498

提升執行效能

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

時間軸中的導覽標記

「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-captiontable-cell。先前僅適用於格線和 Flex,

區塊容器支援前後對照內容。

Chromium 問題:1500511

「來源」中有新的快速鍵和指令

現在可以按下 Cmd (Mac) / Ctrl (Win) + Shift 鍵,然後按一下來源中的行號來建立記錄點。這個快速鍵已新增至現有 Cmd (Mac) / Ctrl (Win) + 點按,以設定條件中斷點。

「指令選單」可使用新的「在導覽器側欄中顯示有效的檔案」指令,這和「編輯器」下拉式選單中的對應選項相同。

您可以使用新指令,在導覽工具側欄中顯示使用中的檔案。

Chromium 問題:14869331467464

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

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

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

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

Chromium 問題:1066842

動態主題設定

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

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

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

Chromium 問題:1483276

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

對於受到追蹤保護功能的第三方限制影響的 Cookie,「聯播網」和「應用程式」面板現在會醒目顯示並顯示警告。

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

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

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

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

將滑鼠遊標懸停在警告圖示上,即可查看問題的工具提示,然後點選圖示開啟「問題」分頁,查看詳細資訊。

此外,系統現在預設會依名稱排序表格中的 Cookie。

Chromium 問題:15062251503961

Lighthouse 11.4.0

Lighthouse 面板現在會執行 Lighthouse 11.4.0 面板。查看完整異動清單。其中一項重大變化就是新的稽核報告,用來偵測網站是否仍使用第三方 Cookie。

可偵測第三方 Cookie 的稽核。

如要瞭解在開發人員工具中使用「Lighthouse」面板的基本概念,請參閱「Lighthouse:最佳化網站速度」。

Chromium 問題:772558

無障礙設定

這個版本有下列無障礙功能改善項目:

  • 開啟設定「設定」>實驗部分,現在會自動聚焦於「搜尋框」方塊。
  • 「網路」中的「取消輸入內容」按鈕 >篩選器現在可聚焦。
  • 「來源」中的檔案樹狀結構 >高對比模式現在可正確顯示頁面
  • 螢幕閱讀器現在可以正確朗讀下列項目:
    • 「來源」部分的核取方塊狀態 >中斷點
    • 建議清單的位置和索引資訊。
    • 設定的「設定」> 中新增或刪除位置資訊時的動作結果地區
    • 設定「設定」中的排除規則群組 (一般或自訂) >忽略清單

Chromium 問題:1504938149986815121611515224151541815169981517015

其他精選內容

這個版本包含多項重要修正和改善項目:

  • 動畫
    • 修正螢幕截圖彈出超出邊界的錯誤 (1506991)。
    • 修正已移除動畫節點未標示為移除的錯誤 (1506561)。
  • 網路
    • 標頭覆寫:修正「Headers」分頁顯示「紫色點」圖示的錯誤 (1507856)。
    • 預覽:修正了不必要的雙重解碼錯誤 (1509336)。
    • 修正無法顯示短要求的錯誤 (1509862)。
  • 應用程式 >IndexedDB:重新排列動作列中的按鈕,使其與其他面板保持一致 (1393800)。
  • 感應器:修正無法使用位置功能,導致回呼成功回呼的錯誤 (1486859)。
  • 成效
    • 「Collect garbage」按鈕現在有適當的「mop」圖示而不是「bin」(1507530)。
    • 前往 about:blank 時,效能追蹤記錄現在會保留資料 (1509947)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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