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

Jecelyn Yeen

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

「Recorder」面板現在支援匯入及匯出使用者流程記錄的 JSON 檔案。這項新增功能不僅可更輕鬆地分享使用者流程，也有助於製作錯誤報告。

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

除此之外，你也可以匯出錄製內容。記錄使用者流程後，按一下匯出按鈕。匯出選項有 3 種：

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

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

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

Chromium 問題：1257499

在「Styles」窗格中查看串聯圖層

階層式圖層可更精確地控制 CSS 檔案，避免樣式專屬衝突。這對大型程式碼集、設計系統，以及在應用程式中管理第三方樣式時特別實用。

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

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

在「Styles」窗格中查看串聯圖層

Chromium 問題：1240596

支援 hwb() 色彩函式

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

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

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

hwb() 色彩函式

改善私有地產的顯示方式

開發人員工具現在可以正確評估並顯示私人存取子。先前您無法在「Console」和「Sources」面板中使用私人存取子展開類別。

控制台中的私有屬性

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 面板現在還支援另外兩種評估使用者流程模式，分別是「時間範圍」和「快照」。

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

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

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

Chromium 問題：772558

下載預覽頻道

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

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

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

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

開發人員工具新功能

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