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

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

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

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

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

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

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

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

Chromium 問題:1257499

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

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

在這個範例中,我們定義了 3 個串聯圖層:pagecomponentbase。在「Styles」(樣式) 窗格中,您可以查看各個圖層及其樣式。

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

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

Chromium 問題:1240596

支援 hwb() 色彩函式

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

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

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

hwb() 色彩函式

改善私有地產的顯示方式

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

控制台中的私有屬性

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

其他精選內容

這個版本包含以下重大修正項目:

  • 往返快取現在會顯示擴充功能 ID,而這個擴充功能 ID 在 bfcache 存在時遭到封鎖 (1284548)。
  • 已修正自動完成支援類似陣列的物件、CSS 類別名稱、map.get 和 HTML 標記。(1297101129749112938071296983)
  • 修正按兩下字詞及取消自動完成時,醒目顯示的醒目顯示錯誤。(12984371298667)
  • 修正「來源」面板中的註解鍵盤快速鍵問題。(1296535)。
  • 重新啟用在「來源」面板中使用 Alt (選項) 鍵的複選功能。(1304070)。

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

除了現有的導覽模式之外,Lighthouse 面板現在還支援另外兩種評估使用者流程模式,分別是「時間範圍」和「快照」

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

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

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

Chromium 問題:772558

下載預覽頻道

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

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

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

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

開發人員工具新功能

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