What's 開發人員工具的新功能 (Chrome 101)

Jecelyn Yeen

以 JSON 檔案格式匯入及匯出記錄的使用者流程

Recorder 面板現在支援以 JSON 檔案格式匯入及匯出使用者流程錄製內容。這項新增功能可讓您更輕鬆地分享使用者流程，並可用於回報錯誤。

例如，下載這個 JSON 檔案。您可以使用匯入按鈕匯入資料，然後重播使用者流程。

除了上述功能外，您也可以匯出錄音檔。記錄使用者流程後，請按一下匯出按鈕。匯出選項有 3 種：

  • 匯出為 JSON 檔案。以 JSON 檔案格式下載錄音。
  • 匯出為 @puppeteer/重播指令碼。將錄製內容下載為 Puppeteer Replay 指令碼。
  • 匯出為 Puppeteer 指令碼。下載錄製內容做為 Puppeteer 指令碼。

如要進一步瞭解這些選項的差異，請參閱說明文件。

「錄音工具」面板中的匯出選項

Chromium 問題：1257499

在「樣式」窗格中查看層疊圖層

層級樣式可讓您更明確地控管 CSS 檔案，避免樣式專屬性發生衝突。這對於大型程式碼集、設計系統，以及在應用程式中管理第三方樣式時特別實用。

在這個範例中，我們定義了 3 個串聯層：page、component 和 base。您可以在「樣式」窗格中查看每個圖層及其樣式。

按一下圖層名稱，即可查看圖層順序。page 圖層的明確性最高，因此 box 背景為綠色。

在「樣式」窗格中查看層疊圖層

Chromium 問題：1240596

支援 hwb() 顏色函式

您現在可以在開發人員工具中查看及編輯 HWB 顏色格式。

在「Styles」窗格中，按住「Shift」鍵，然後點選任一顏色預覽畫面，即可變更顏色格式。已新增 HWB 顏色格式。

或者，您也可以在顏色挑選器中將色彩格式變更為 HWB。

hwb() 色彩函式

改善私人房源的顯示方式

開發人員工具現在可正確評估及顯示私人存取子。先前您無法在「控制台」和「來源」面板中，展開含有私人存取子類別。

控制台中的私人資源

Chromium 問題：1296855、https://crbug.com/1303407

其他精選內容

以下是這個版本中值得注意的修正項目：

  • 往返快取現在會顯示擴充功能 ID，該 ID 會在存在時封鎖 bfcache。(1284548)
  • 已修正自動完成支援類似陣列的物件、CSS 類別名稱、map.get 和 HTML 標記。(1297101、1297491、1293807、1296983)
  • 修正雙擊字詞和復原自動完成功能時，醒目顯示功能會顯示錯誤內容的問題。(1298437、1298667)
  • 修正「來源」面板中的註解鍵盤快速鍵。(1296535)
  • 重新啟用在「來源」面板中使用 Alt (選項) 鍵的複選功能。(1304070)。

[實驗功能] Lighthouse 面板中的新時間範圍和快照模式

除了現有的導覽模式，Lighthouse面板現在還支援兩種評估使用者流程的模式：時間範圍和快照。

舉例來說，您可以使用時間範圍報表來分析使用者互動。開啟這個示範頁面。選取「時間範圍」模式，然後按一下「開始時間範圍」。在頁面上按一下咖啡圖示，結束時間範圍。閱讀報告，瞭解互動造成的總封鎖時間和累計版面配置位移。

每種模式都有其獨特的用途、優點和限制。詳情請參閱 Lighthouse 說明文件。

Lighthouse 面板中的時間範圍和快照模式

Chromium 問題：772558

下載預覽管道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。