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 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59