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

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

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

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

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

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

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

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

Chromium 問題:1257499

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

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

在這個範例中,定義了 3 個層級:pagecomponentbase。您可以在「樣式」窗格中查看每個圖層及其樣式。

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

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

Chromium 問題:1240596

支援 hwb() 顏色函式

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

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

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

hwb() 色彩函式

改善私人房源的顯示方式

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

控制台中的私人資源

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

其他精選內容

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

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

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

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

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

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

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

Chromium 問題:772558

下載預覽管道

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

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

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

開發人員工具的新功能

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