什麼是開發人員工具？#39;s 開發人員工具新功能 (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

附註：想協助改善開發人員工具嗎？請按這裡報名參加 Google 使用者研究。

錄音工具更新

支援重播擴充功能

錄音工具支援自訂重播選項，您可以使用擴充功能嵌入開發人員工具。

試試擴充功能範例。選取新的自訂重播選項，開啟自訂重播 UI。

如要根據自己的需求自訂 Recorder，並將其與工具整合，建議你開發自己的擴充功能：探索 chrome.devtools.recorder API，並查看更多擴充功能範例。

Chromium 問題：1400243。

使用 Pierce 選取器錄製

除了自訂、CSS、ARIA、文字和 XPath 選取器外，你現在可以使用Pierce 選取器錄製影片。這些選取器的運作方式與 CSS 網域類似，但也可能在陰影根層級過動。

使用 shadow DOM 在網頁上開始新的錄製作業，並在「要錄製的選取器類型」中勾選 「Pierce」。記錄您與陰影 DOM 中的元素的互動，並檢查對應的步驟。

Chromium 問題：1411188。

匯出為 Puppeteer 指令碼，並運用 Lighthouse 分析功能

錄音工具推出新的匯出選項：Puppeteer (包括 Lighthouse 分析)。您可以透過 Puppeteer 自動化及控制 Chrome。有了 Lighthouse，就能找出並提高網站成效。

開啟錄製內容，按一下「」匯出，選取新選項，然後儲存 .js 檔案。

執行 Puppeteer 指令碼，在 flow.report.html 檔案中取得 Lighthouse 報告。

取得擴充功能

探索可自訂錄音工具體驗的選項，例如自訂匯出選項。在錄音檔中依序點選 「Export」 >「Get Extensions」，取得「Recorder」擴充功能。

也可以自行新增擴充功能至錄音工具擴充功能清單。期待您的加入！

Chromium 問題：1417104、1413168。

元素 > 樣式更新

CSS 說明文件

你每天查詢 CSS 屬性的說明文件次數為何？現在只要將遊標懸停在屬性上方，「Elements」(元素) >「Styles」(樣式) 窗格就會顯示簡短說明。

工具提示也會提供瞭解詳情連結，可前往這項資源的 MDN CSS 參考資料。

如果你對 CSS 很瞭解，可能會覺得工具提示並感到困擾。如要關閉所有通知，請勾選 「不要顯示」。

如要重新啟用，請依序前往 「設定」 >「偏好設定」 >「元素」 >「 顯示 CSS 說明文件工具提示」。

注意：開發人員工具會從 VS Code Custom Data 提取工具提示的說明。

Chromium 問題：1401107。

CSS 巢狀支援

「Elements」(元素) >「Styles」(樣式) 窗格現在可辨識 CSS 巢狀結構語法，並將巢狀樣式套用至正確的元素。

Chromium 問題：1172985。

在主控台中標記記錄點和條件式中斷點

在進一步改善強化的中斷點使用者體驗後，主控台現在會標記由中斷點觸發的訊息：

• 在條件式中斷點中執行 console.* 呼叫，並以橘色問號 ? 顯示
• 以粉紅色兩點 .. 表示的 Logpoint 訊息

控制台現在提供指向來源檔案中的中斷點的正確錨點連結，而不是 Chrome 在 V8 上執行任何 JavaScript 的 VM<number> 指令碼。

按一下中斷點訊息旁的連結，即可直接跳至中斷點編輯器。

Chromium 問題：1027458。

在偵錯期間忽略不相關的指令碼

為了協助您專注在程式碼中最重要的部分，您現在可以依序前往「來源」 >「網頁」窗格的檔案樹狀結構，將不相關的指令碼加入「忽略清單」。

在任何指令碼或資料夾上按一下滑鼠右鍵，然後選取其中一個忽略相關選項。你可能會看到新增或移除指令碼或資料夾的選項。偵錯工具會忽略加入清單的指令碼，並在呼叫堆疊中省略這些指令碼。

在檔案樹狀結構中，所有忽略的指令碼和資料夾都會顯示為灰色。

如果選取了忽略的指令碼，請按一下「Configure」按鈕前往 「Settings」 >「Ignore List」。你也可以依序點按 >「隱藏已忽略的來源來源」 ，在檔案樹狀結構中隱藏已忽略的來源。

Chromium 問題：883325。

已開始淘汰 JavaScript 分析器

開發人員工具團隊最早預計在 Chrome 58 版時淘汰 JavaScript 分析器，同時讓 Node.js 和 Deno 開發人員使用「Performance」面板來剖析 JavaScript CPU 效能。

這個開發人員工具版本 (112) 會開始淘汰四階段 JavaScript 分析器。「JavaScript Profiler」面板現在會顯示對應的警告橫幅。

請使用「Performance」面板 (而非「Profiler」) 來分析 CPU。

如要進一步瞭解及提供意見回饋，請參閱對應的 RFC 和 crbug.com/1354548。

Chromium 問題：1417647。

模擬低對比敏感度

「算繪」分頁會在「Emulate vision De 弱值」清單中新增選項：「降低對比度」。這個選項可讓你瞭解網站在對比度敏感度較低的使用者眼中的呈現效果。

請注意，清單選項已更新，以讓您瞭解選項所呈現的顏色敏感度。

有了開發人員工具，你可以一次找出並修正所有對比問題。詳情請參閱這篇文章，瞭解如何製作更易讀的網站。

Chromium 問題：1412719、1412721。

燈塔 10

Lighthouse 面板現在會執行 Lighthouse 10.0.1。詳情請參閱 Lighthouse 10.0.1 新功能。

如要瞭解使用開發人員工具中 Lighthouse 面板的基本概念，請參閱「Lighthouse：改善網站速度」。

Lighthouse > > 舊版導覽功能現已預設為停用。這個選項會在導覽模式中使用舊版 Lighthouse 設定。

Lighthouse 10 現在使用 Moto G Power 做為預設模擬裝置。開發人員工具已新增至 設定 > 裝置。

Chromium 問題：772558。

控制台警告，告知移除免人工管理的 Service Worker 擷取處理常式

Chrome 112 會略過免人工管理 (無作業) Service Worker 擷取處理常式，因為這類處理常式可能會減緩瀏覽速度，但毫無用途。你的網站不再需要使用這類處理常式，即可成為漸進式網頁應用程式。

現在，如果系統在您的網站找到免人工管理擷取處理常式，控制台會顯示警告訊息。建議移除。

Chromium 問題：1347319。

其他精選內容

這個版本的幾個重點修正如下：

• 「來源 > 中斷點」窗格現在會在模糊的檔案名稱旁邊顯示不同的檔案路徑 (1403924)。
• 在「Performance」面板的火焰圖中，「Main」(主要) 區段現在會將 CpuProfiler::StartProfiling 指定為 Profiler Overhead (1358602)。
• 開發人員工具改善了自動完成功能：
  • 資料來源：任何字詞均一致 (1320204)。
  • 控制台：Arrow down 會選取第一個建議，並提供 Tab 提示 (1276960)。
• 開發人員工具新增了事件監聽器中斷點，可讓您在開啟文件子母畫面 (1315352) 時暫停。
• 開發人員工具設定了一個變通方法，可將 Vue2 Webpack 構件正確顯示為 JavaScript (1416562)。
• 透過控制台使用更佳的名稱：自動展開 console.trace() 訊息。(1139616)。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

• 請透過 crbug.com 提交建議或意見回饋。
• 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示   >「說明」 >「回報開發人員工具的問題」。
• 在 @ChromeDevTools 張貼推文。
• 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

• 尋找彩蛋
• 元素面板更新
• 前往「元素」>「樣式」模擬焦點網頁
• var() 備用選項中的顏色挑選器、Angle Clock 和 Easing Editor
• CSS 長度工具已淘汰
• 「成效」>「主要測試群組」中所選搜尋結果的彈出式視窗
• 網路面板更新
• 位於「網路」>「EventStream」分頁中的清除按鈕和搜尋篩選器
• 聯播網 > Cookie 中第三方 Cookie 豁免原因的工具提示
• 啟用和停用「來源」中的所有中斷點
• 在 Node.js 適用的開發人員工具中查看已載入的指令碼
• Lighthouse 11.5.0 版本
• 改善無障礙功能
• 其他精選內容

Chrome 122

• 錄音工具擴充功能已正式推出
• 改善網路
• 「狀態」欄中的失敗原因
• 改良的「複製」子選單
• 提升效能
• 時間軸中的導覽標記
• 主要測試群組中的事件啟動者
• Node.js 開發人員工具的 JavaScript VM 執行個體選取器選單
• 「來源」中的新捷徑和指令
• 改善元素
• 現在可以在 Styles 中編輯 ::view-transition pseudo-element
• 適用於區塊容器的對齊內容屬性
• 模擬折疊式裝置的防護機制支援
• 動態主題設定
• 在「網路和應用程式」面板中逐步淘汰第三方 Cookie 警告
• Lighthouse 11.4.0 版本
• 改善無障礙功能
• 其他精選內容

Chrome 121

• 改善元素
• 「網路」面板的精簡篩選列
• @font-palette-values 支援
• 支援情況：用自訂屬性做為其他自訂屬性的備用資源
• 改善來源地圖支援
• 改善效能面板
• 加強型互動追蹤功能
• 「Bottom Up」、「Call Tree」和「Event Log」分頁中的進階篩選功能
• 「來源」面板中的縮排標記
• 在「網路」面板中覆寫標頭和內容的實用工具提示
• 新增及移除要求封鎖模式的指令選單選項
• CSP 違規事項實驗已移除
• Lighthouse 11.3.0 版本
• 改善無障礙功能
• 其他精選內容

Chrome 120

• 逐步淘汰第三方 Cookie
• 使用 Privacy Sandbox 分析工具分析網站的 Cookie
• 強化忽略產品資訊
• node_modules 的預設排除模式
• 擷取或傳遞未忽略的程式碼時，遭擷取的例外狀況現在會停止執行
• x_google_ignoreList已在來源對應中重新命名為「ignoreList」
• 遠端偵錯期間的全新輸入模式切換鈕
• 「元素」面板現在會顯示 #document 節點的網址
• 「應用程式」面板中的「有效的內容安全政策」
• 改善動畫偵錯功能
• 控制台中的「來源和自助式 XSS 警告」對話方塊
• 網路 worker 和 Worklet 中的事件監聽器中斷點
• <audio>和<video>的新媒體徽章
• 預先載入功能已重新命名為「推測載入」
• Lighthouse 11.2.0 版本
• 改善無障礙功能
• 其他精選內容

Chrome 119

• 改善「元素」>「樣式」中的 @property 部分
• 可編輯的 @property 規則
• 系統會回報 @property 規則無效的問題
• 更新要模擬的裝置清單
• 來源中的指令碼標記包含美化內嵌 JSON
• 在控制台中自動完成不公開欄位
• Lighthouse 11.1.0 版本
• 改善無障礙功能
• Web SQL 淘汰
• 在「Application」(應用程式) >「Manifest」(資訊清單) 中驗證螢幕截圖顯示比例
• 其他精選內容

Chrome 118

• 依序前往「元素」>「樣式」中的自訂屬性新專區
• 改善更多本機覆寫設定
• 強化搜尋功能
• 改良的「來源」面板
• 「來源」面板中的精簡工作區
• 重新排序來源中的窗格
• 適用於更多指令碼類型的語法醒目顯示和美化排版
• 模擬 preferreds-reduced-transparency Media 功能
• Lighthouse 11
• 改善無障礙功能
• 其他精選內容

Chrome 117

• 改善網路面板
• 更快在本機覆寫網路內容
• 覆寫 XHR 內容並擷取要求
• 隱藏 Chrome 擴充功能要求
• 使用者可理解的 HTTP 狀態碼

• JSON 子類型的精確列印回應

• 效能：查看網路事件擷取優先順序的變化

• 預設啟用的來源設定：程式碼折疊和自動檔案顯示

• 改善第三方 Cookie 問題的偵錯功能

• 全新顏色

• Lighthouse 10.4.0 版本

• 在應用程式面板中偵錯預先載入功能

• 開發人員工具的 C/C++ WebAssembly 偵錯擴充功能現已成為開放原始碼

• 其他精選內容

• (實驗功能) 新的轉譯模擬功能：preferreds-reduced-transparency

• (實驗功能) 加強型通訊協定監控功能

Chrome 116

• 改善缺少樣式表的偵錯功能
• 「元素」>「樣式」>「加/減速編輯器」中支援線性時間
• 儲存空間值區支援和中繼資料檢視
• Lighthouse 10.3.0 版本
• 無障礙設計：鍵盤指令功能提升螢幕閱讀效率
• 其他精選內容

Chrome 115

• 改善元素
• 全新 CSS 子格徽章
• 工具提示中的選取器詳細程度
• 工具提示中的自訂 CSS 屬性值
• 資料來源改善項目
• CSS 語法醒目顯示功能
• 用來設定條件中斷點的捷徑
• 應用程式 > 跳轉追蹤因應措施
• Lighthouse 10.2.0 版本
• 預設忽略內容指令碼
• 網路 > 回應改善項目
• 其他精選內容

Chrome 114

• WebAssembly 偵錯支援
• 改善 Wasm 應用程式中的計步行為
• 使用「元素」面板和「問題」分頁對自動填入功能進行偵錯
• 錄音工具中的斷言
• Lighthouse 10.1.1 版本
• 提升效能
• performance.mark() 將遊標懸停在「成效」>「時間」後會顯示時間
• profile() 指令會填入「Performance」>「Main」
• 使用者互動緩慢的警告
• 網站體驗指標更新
• JavaScript 分析器淘汰：第 3 階段
• 其他精選內容

Chrome 113

• 覆寫網路回應標頭
• 改善 Nuxt、Vite 和 Rollup 偵錯功能
• 改善「元素」>「樣式」的 CSS
• CSS 屬性和值無效
• 動畫簡短屬性中主要影格的連結
• 新版控制台設定：輸入時自動完成建議
• Command 選單會凸顯已編寫的檔案
• JavaScript 分析器淘汰：第二階段
• 其他精選內容

Chrome 112

• 錄音工具更新
• 錄音工具重播擴充功能
• 使用 Pierce 選取器錄製
• 透過 Lighthouse 分析，將錄音檔匯出為 Puppeteer 腳本
• 取得錄音工具適用的擴充功能
• 元素 > 樣式更新
• 「Styles」窗格中的 CSS 說明文件
• CSS 巢狀結構支援
• 在主控台中標記記錄點和條件式中斷點
• 在偵錯期間忽略不相關的指令碼
• 開始淘汰 JavaScript 分析器
• 模擬低對比敏感度
• Lighthouse 10
• 其他精選內容

Chrome 111

• 使用樣式窗格對 HD 高畫質色彩進行偵錯
• 改善中斷點使用者體驗
• 可自訂的錄音工具快速鍵
• 改善 Angular 語法的醒目顯示功能
• 重新整理「應用程式」面板中的快取
• 其他精選內容

Chrome 110 版本

• 重新載入時清除效能面板
• 錄音工具更新
• 在錄音工具中查看並醒目顯示使用者流程程式碼
• 自訂錄製內容的選取器類型
• 在錄製時編輯使用者流程
• 自動就地列印美化圖案
• 改善 Vue、SCSS 等產品的語法醒目顯示功能和內嵌預覽功能
• 在控制台中提供符合彈性且一致的自動完成功能
• 其他精選內容

Chrome 109 版

• 錄音工具：複製做為步驟、網頁內重播、步驟內容選單的選項
• 在效能錄音中顯示實際函式名稱
• 「控制台與來源」面板中的新鍵盤快速鍵
• 改善 JavaScript 偵錯
• 其他精選內容
• [實驗功能] 改善管理中斷點的使用者體驗
• [實驗功能] 自動就地列印美化圖案

Chrome 108 版

• 停用的 CSS 屬性的提示
• 在錄音工具面板中自動偵測 XPath 和文字選取器
• 逐步完成以半形逗號分隔的運算式
• 改善「忽略清單」設定
• 其他精選內容

Chrome 107 版

• 在開發人員工具中自訂鍵盤快速鍵
• 使用鍵盤快速鍵切換淺色和深色主題
• 在記憶體檢查器中醒目顯示 C/C++ 物件
• 支援用來匯入 HAR 資料的完整發起人資訊
• 按下 Enter 後開始 DOM 搜尋
• 顯示 align-content CSS Flbox 屬性的 start 和 end 圖示
• 其他精選內容

Chrome 106 版

• 在「來源」面板中，依「已編寫」/「已部署」選項將檔案分組
• 非同步作業的連結堆疊追蹤
• 自動忽略已知的第三方指令碼
• 改善偵錯期間的呼叫堆疊
• 隱藏「來源」面板中已忽略的來源
• 隱藏指令選單中的忽略清單檔案
• 「成效」面板中新增互動追蹤功能
• 「效能洞察」面板中的 LCP 時間細目
• 在「錄音工具」面板中為錄製內容自動產生預設名稱
• 其他精選內容

Chrome 105

• 錄音工具的重播功能說明
• 在錄音工具面板中支援滑鼠遊標懸停事件
• 「Performance Insights」面板中的「最大內容繪製」(LCP)
• 找出文字閃爍 (FOIT、FOUT) 是版面配置位移的潛在根本原因
• 資訊清單窗格中的通訊協定處理常式
• 「元素」面板中的頂層圖層徽章
• 在執行階段附加 Wasm 偵錯資訊
• 在偵錯期間支援即時編輯功能
• 在「Styles」窗格的規則中查看及編輯 @scope
• 來源地圖改善項目
• 其他精選內容

Chrome 104 版

• 在偵錯期間重新啟動影格
• 錄音工具面板中的緩慢重播選項
• 建構錄音工具面板的擴充功能
• 在「來源」面板中，依「已編寫」/「已部署」選項將檔案分組
• 「成效深入分析」面板中提供「新使用者載入時間」追蹤
• 顯示指派給元素的版位
• 為效能錄製內容模擬硬體並行
• 自動完成 CSS 變數時預覽非顏色值
• 在往返快取窗格中找出封鎖框架
• 改善 JavaScript 物件的自動完成建議
• 來源地圖改善項目
• 其他精選內容

Chrome 指南

• 在「錄音工具」面板擷取內容，按兩下事件及按一下滑鼠右鍵
• Lighthouse 面板新增時間範圍和快照模式
• 改善「Performance Insights」面板中的縮放控制項
• 確認刪除表演記錄
• 重新排列「元素」面板中的窗格
• 挑選瀏覽器以外的顏色
• 改善偵錯期間的內嵌值預覽
• 支援大型 blob 進行虛擬驗證器
• 「來源」面板中的新鍵盤快速鍵
• 來源地圖改善項目

Chrome 指南

• 預先發布版功能：新版「效能深入分析」面板
• 模擬淺色和深色主題的全新快速鍵
• 更完善的「網路預覽」分頁安全性
• 改善中斷點重新載入功能
• 管理中心最新消息
• 一開始就取消使用者流程記錄
• 在「Styles」(樣式) 窗格中顯示沿用的醒目顯示虛擬元素
• 其他精選內容
• [實驗功能] 複製 CSS 變更內容
• [實驗功能] 選擇瀏覽器以外的顏色

Chrome 指南

• 以 JSON 檔案匯入及匯出記錄的使用者流程
• 在「Styles」窗格中查看階層式圖層
• 支援 hwb() 顏色函式
• 改善私人地產的顯示功能
• 其他精選內容
• [實驗功能] Lighthouse 面板新增時間範圍和快照模式

Chrome 指南

• 在「Styles」窗格中查看及編輯規則中的 @support
• 預設支援常見的選取器
• 自訂錄製內容的選取器
• 重新命名錄製內容
• 懸停時預覽類別/函式屬性
• 「效能」面板中呈現的部分影格
• 其他精選內容

Chrome 99

• 調節 WebSocket 要求
• 「應用程式」面板中新增 Reporting API 窗格
• 支援等待在錄音工具面板中顯示/點選元素
• 改善控制台樣式、格式設定和篩選功能
• 使用來源對應檔案為 Chrome 擴充功能進行偵錯
• 改良「來源」面板中的來源資料夾樹狀結構
• 在「Source」(來源) 面板中顯示 worker 來源檔案
• Chrome 的自動深色主題更新
• 支援觸控的色彩挑選器和分割窗格
• 其他精選內容

Chrome 98 版

• 預先發布版功能：整頁的無障礙樹狀結構
• 在「變更」分頁中進行更精細的變更
• 設定使用者流程記錄較長的逾時時間
• 透過「往返快取」分頁確保網頁可供快取
• 新增屬性窗格篩選器
• 模擬 CSS forced-colors 媒體功能
• 在懸停指令時顯示尺規
• 在 Flexbox 編輯器中支援 row-reverse 和 column-reverse
• 使用新的鍵盤快速鍵重播 XHR 並展開所有搜尋結果
• Lighthouse 面板 9 號
• 改良的「來源」面板
• 其他精選內容
• [實驗功能] Reporting API 窗格中的端點

Chrome 97

• 預先發布版功能：全新錄音工具面板
• 在裝置模式中重新整理裝置清單
• 以 HTML 編輯，自動完成功能
• 改善程式碼偵錯體驗
• 在多部裝置上同步處理開發人員工具設定

Chrome 96

• 預先發布版功能：新的 CSS 總覽面板
• 還原及改善 CSS 長度編輯和文案
• 模擬 CSSpreferreds-contrast 媒體功能
• 模擬 Chrome 的自動深色主題功能
• 在「Styles」窗格中以 JavaScript 複製宣告內容
• 「Network」面板中新增「酬載」分頁
• 改善屬性窗格中的屬性顯示功能
• 在控制台中隱藏 CORS 錯誤
• 在控制台中預覽及評估正確的 Intl 物件
• 一致的非同步堆疊追蹤
• 保留控制台側欄
• 「Applications」面板中的已淘汰「Applications」快取窗格
• [實驗功能] 「應用程式」面板提供新的 Reporting API 窗格

Chrome 95

• 全新 CSS 長度編寫工具
• 在「問題」分頁中隱藏問題
• 改善屬性顯示方式
• Lighthouse 面板 Lighthouse 8.4
• 「來源」面板中的程式碼片段排序
• 新增翻譯版版本資訊和翻譯錯誤連結
• 改善開發人員工具指令選單的使用者介面

Chrome 94 版

• 以偏好語言使用開發人員工具
• 裝置清單中的全新 Nest Hub 裝置
• 在「頁框詳細資料」檢視畫面中的來源試用
• 全新 CSS 容器查詢標記
• 新增用來反轉網路篩選器的核取方塊
• Play 管理中心側欄即將淘汰
• 在「問題」分頁和「網路」面板顯示原始 Set-Cookies 標頭
• 在控制台中持續將原生存取子顯示為自己的屬性
• 包含 #sourceURL 內嵌指令碼的正確錯誤堆疊追蹤
• 在運算窗格中變更色彩格式
• 以原生 HTML 工具提示取代自訂工具提示
• [實驗功能] 在「問題」分頁中隱藏問題

Chrome 93 版

• 「Styles」窗格中可編輯的 CSS 容器查詢
• 「網路」面板中的網頁版套件預覽
• Attribution Reporting API 偵錯
• 在主控台中改善字串處理方式
• 改善 CORS 偵錯
• Lighthouse 8.1
• 「資訊清單」窗格中的新記事網址
• 修正 CSS 比對選取器
• 「網路」面板中顯示正確列印的 JSON 回應

Chrome 92 版

• CSS 格線編輯器
• 支援在 Play 管理中心內使用 const 宣告
• 來源順序檢視工具
• 查看影格詳細資料的新捷徑
• 進階 CORS 偵錯支援
• 將 XHR 標籤重新命名為 Fetch/XHR
• 在「網路」面板中篩選 Wasm 資源類型
• 「網路狀況」分頁中裝置的使用者代理程式用戶端提示
• 在「問題」分頁中回報測驗模式問題
• 在「效能」面板中加入運算十字路口
• Lighthouse 面板 7.5 版本
• 淘汰呼叫堆疊中的「重新啟動頁框」內容選單
• [實驗功能] 通訊協定監控
• [實驗功能] Puppeteer Recorder

Chrome 91 版

• 會彈出網站體驗指標資訊
• 全新記憶體檢查器
• 以視覺化方式呈現 CSS 捲軸
• 新徽章設定窗格
• 含有顯示比例資訊的強化圖片預覽
• 新增網路條件按鈕，提供 Content-Encoding 的設定選項
• 查看計算出的值
• accent-color關鍵字
• 使用顏色和圖示將問題類型分類
• 刪除信任權杖
• 「影格詳細資料」檢視畫面中的已封鎖功能
• 在「實驗」設定中篩選實驗
• 「快取儲存空間」窗格中新增的 Vary Header 資料欄
• 支援 JavaScript 私人品牌檢查
• 強化對中斷點偵錯的支援
• 使用 [] 標記法支援懸停預覽
• 改善 HTML 檔案大綱
• Wasm 偵錯的正確錯誤堆疊追蹤

Chrome 90

• 全新 CSS flexbox 偵錯工具
• 新增網站體驗核心指標重疊內容
• 問題數量已移至主控台狀態列
• 回報「受信任網路活動」問題
• 在控制台中將字串格式化為 (有效) JavaScript 字串常值
• 「Application」面板中新增「Trust Tokens」窗格
• 模擬 CSS 色彩轉換媒體功能
• 改良的漸進式網頁應用程式工具
• 在「網路」面板中新增「Remote Address Space」欄
• 提升效能
• 在「影格詳細資料」檢視畫面中顯示允許/不允許的功能
• 「Cookie」窗格中新增「SameParty」欄
• 淘汰非標準的 fn.displayName 支援
• 「設定」選單中的 Don't show Chrome Data Saver warning 已淘汰
• [實驗功能] 「問題」分頁中會自動回報低對比問題
• [實驗功能]「元素」面板提供完整的無障礙樹狀檢視

Chrome 89

• 對信任類型違規問題提供的偵錯支援
• 擷取可視區域以外的節點螢幕截圖
• 網路要求的全新「信任權杖」分頁
• Lighthouse 面板 7 號
• 支援強制執行 CSS :target 狀態
• 重複元素的新捷徑
• 自訂 CSS 屬性的顏色挑選器
• 複製 CSS 屬性的新快速鍵
• 顯示網址解碼 Cookie 的新選項
• 僅清除可見的 Cookie
• 在「儲存空間」窗格中清除第三方 Cookie 的新選項
• 編輯自訂裝置的使用者代理程式用戶端提示
• 保留「記錄網路記錄」設定
• 在「網路」面板中查看 WebTransport 連線
• 「線上」已重新命名為「無節流」
• 「控制台」、「來源」面板和「樣式」窗格中的新複製選項
• 在「Frame Details」檢視畫面中新增 Service Worker 資訊
• 在「影格詳細資料」檢視畫面中測量記憶體資訊
• 透過「問題」分頁提供意見回饋
• 「效能」面板中捨棄的影格
• 在裝置模式中模擬摺疊式裝置和雙螢幕模式
• [實驗功能] 使用 Puppeteer Recorder 自動執行瀏覽器測試
• [實驗功能] 「樣式」窗格中的字型編輯器
• [實驗功能] CSS Flbox 偵錯工具
• [實驗功能] 新的「CSP 違規」分頁
• [實驗功能] 新的色彩對比計算方式 - 進階感知對比演算法 (APCA)

Chrome 88 版

• 加速開發人員工具啟動
• 全新 CSS 角度視覺化工具
• 模擬不支援的圖片類型
• 在「儲存空間」窗格中模擬儲存空間配額大小
• 「效能」面板提供新的網站體驗指標通道
• 在「網路」面板中回報 CORS 錯誤
• 「影格詳細資料」檢視畫面中的跨來源隔離資訊
• 在「Frame details」(頁框詳細資料) 檢視畫面中新增網路工作站資訊
• 針對已開啟的視窗顯示開啟的視窗畫面詳細資料
• 從「Service Workers」窗格開啟網路面板
• 複製屬性值
• 複製網路啟動器的堆疊追蹤
• 在滑鼠遊標懸停時預覽 Wasm 變數值
• 在主控台中評估 Wasm 變數
• 檔案/記憶體大小的測量單位一致
• 醒目顯示「元素」面板中的虛擬元素
• [實驗功能] CSS Flexbox 偵錯工具
• [實驗功能] 自訂和弦鍵盤快速鍵

Chrome 87

• 全新 CSS 格線偵錯工具
• 新增 WebAuthn 分頁
• 在頂端和底部面板之間移動工具
• 「樣式」窗格中新增運算側欄窗格
• 在運算窗格中將 CSS 屬性分組
• Lighthouse 面板 6.3 號
• 「時間」部分包含 performance.mark() 個事件
• 「網路」面板推出新的 resource-type 和 url 篩選器
• 影格詳細資料檢視畫面更新
• 在「更多工具」選單中淘汰 Settings
• [實驗功能] 在 CSS 總覽面板中查看及修正色彩對比問題
• [實驗功能] 在開發人員工具中自訂鍵盤快速鍵

Chrome 86

• 新增媒體面板
• 使用「元素」面板內容選單擷取節點螢幕截圖
• 「問題」分頁更新
• 模擬缺少的本機字型
• 模擬不活躍的使用者
• 模擬 prefers-reduced-data
• 支援新版 JavaScript 功能
• Lighthouse 面板 6.2 號
• 淘汰「Service Workers」窗格中的「其他來源」清單
• 顯示篩除項目的涵蓋範圍摘要
• 「應用程式」面板中的新頁框詳細資料檢視畫面
• 「Styles」窗格中的無障礙顏色建議
• 在「元素」面板中恢復顯示「屬性」窗格
• 「網路」面板中人類可讀的 X-Client-Data 標頭值
• 在「Styles」窗格中自動完成自訂字型
• 在「網路」面板中持續顯示資源類型
• 清除「元素」和「網路」面板中的按鈕

Chrome 85 版

• CSS-in-JS 架構的樣式編輯
• Lighthouse 面板 6 號
• 首次有效繪製 (FMP) 即將淘汰
• 支援新版 JavaScript 功能
• 「資訊清單」窗格中的新應用程式捷徑警告
• 「時間」分頁中的 Service Worker respondWith 事件
• 一致的運算窗格顯示畫面
• WebAssembly 檔案的位元組碼偏移
• 在「來源」面板中逐行複製及剪下
• 管理中心設定更新
• 效能面板更新
• 中斷點、條件式中斷點和記錄點的新圖示

Chrome 84 版

• 在新的「問題」分頁中修正網站問題
• 在檢查模式工具提示中查看無障礙功能資訊
• 效能面板更新
• 控制台中更準確的承諾相關術語
• 樣式窗格更新
• 淘汰「元素」面板中的「屬性」窗格
• 「資訊清單」窗格中支援應用程式捷徑

Chrome 83 版

• 模擬視覺障礙
• 模擬語言代碼
• 跨來源嵌入程式政策 (COEP) 偵錯
• 中斷點、條件式中斷點和記錄點的新圖示
• 查看設定特定 Cookie 的網路要求
• 透過指令選單向左移動
• 主選單中的「設定」選項已移至他處
• Audits 面板現已改為 Lighthouse 面板
• 刪除資料夾中的所有本機覆寫設定
• 更新長工作 UI
• 資訊清單窗格中支援可遮蓋的圖示

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

• 裝置模式中的 Moto G4 支援功能
• Cookie 相關更新
• 更準確的網頁應用程式資訊清單圖示
• 將滑鼠遊標懸停在 CSS content 屬性上，即可查看未逸出的值
• 控制台中的來源地圖錯誤
• 設定在檔案結尾後停用捲動功能的設定

Chrome 80 版

• 在 Play 管理中心支援 let 和 class 宣告
• 改善 WebAssembly 偵錯功能
• 在「申請者」分頁中要求提出者鏈結要求
• 在「總覽」中醒目顯示所選網路要求
• 「網路」面板中的網址和路徑欄
• 更新過的使用者代理程式字串
• 新增稽核面板設定 UI
• 個別函式或每個區塊的程式碼涵蓋率模式
• 現在必須重新載入頁面，才能啟動程式碼涵蓋率

Chrome 79

• 偵錯 Cookie 遭到封鎖的原因
• 查看 Cookie 值
• 模擬不同 refers-color-scheme 和偏好減少動作的偏好
• 程式碼涵蓋範圍更新
• 偵錯要求網路資源的原因
• 控制台和來源面板會再次遵循縮排偏好設定
• 遊標瀏覽的新快速鍵

Chrome 78

• 「稽核」面板中的多重用戶端支援
• 付款處理常式偵錯
• 稽核面板中的 Lighthouse 5.2
• 「效能」面板中的「最大內容繪製」
• 主選單中的檔案開發人員工具問題

Chrome 77

• 複製元素樣式
• 以視覺化方式呈現版面配置位移
• 稽核面板中的 Lighthouse 5.1
• OS 主題同步處理
• 開啟中斷點編輯器的鍵盤快速鍵
• 在「網路」面板中預先擷取快取
• 查看物件時的私人屬性
• 「應用程式」面板中的通知和推送訊息

Chrome 76

• 使用 CSS 值自動完成
• 聯播網設定專用的新 UI
• 在 HAR 匯出檔中的 WebSocket 訊息
• HAR 匯入和匯出按鈕
• 即時記憶體用量
• 服務工作人員登記通訊埠號碼
• 檢查背景擷取和背景同步處理事件
• 適用於 Firefox 的 Puppeteer

Chrome 75

• 自動完成 CSS 函式時的實用預設選項
• 透過指令選單清除網站資料
• 查看所有 IndexedDB 資料庫
• 懸停查看資源的未壓縮大小
• 在「Breakpoints」窗格中內嵌中斷點
• IndexedDB 和 快取資源數量
• 設定停用詳細檢查工具提示的設定
• 設定用於切換編輯器中分頁縮排的設定

Chrome 74

• 醒目顯示受 CSS 屬性影響的所有節點
• 稽核面板中的 Lighthouse 第 4 版
• WebSocket 二進位訊息檢視器
• 在指令選單中擷取區域螢幕截圖
• 「網路」面板中的 Service Worker 篩選器
• 效能面板更新
• 錄製效能面板的長時間工作
• 「時間碼」部分中的「First Paint」
• 額外提示：查看 RGB 和 HSL 顏色代碼的快速鍵 (影片)

Chrome 73

• 記錄點
• 檢查模式的詳細工具提示
• 匯出程式碼涵蓋率資料
• 使用鍵盤瀏覽控制台
• 顏色挑選器中的 AAA 對比度線條
• 儲存自訂地理位置覆寫設定
• 程式碼折疊
• 「Frames」分頁已重新命名為「Message」分頁
• 額外提示：依資源篩選網路面板 (影片)

Chrome 72

• 在「成效」面板中以圖表呈現成效指標
• 在 DOM 樹狀結構中醒目顯示文字節點
• 將 JS 路徑複製至 DOM 節點
• 稽核面板更新，包括全新的稽核功能，可偵測 JS 程式庫和新關鍵字，以便透過「指令」選單存取「稽核」面板
• 額外提示：使用裝置模式檢查媒體查詢 (影片)

Chrome 71

• 將遊標懸停在即時運算式結果，即可醒目顯示 DOM 節點
• 將 DOM 節點儲存為全域變數
• 發起人與優先順序資訊現在都可使用 HAR 匯入和匯出功能
• 從主選單存取指令選單
• 子母畫面中斷點
• 額外提示：使用 monitorEvents() 在主控台中記錄節點的已觸發事件 (影片)

Chrome 70

• 控制台中的即時運算式
• 在 Eager 評估期間醒目顯示 DOM 節點
• 效能面板最佳化
• 更可靠的偵錯功能
• 透過指令選單啟用網路節流功能
• 自動完成條件中斷點
• 中斷 AudioContext 事件
• 使用 ndb 對 Node.js 應用程式進行偵錯
• 額外訣竅：運用 User Timing API 評估真實環境中的使用者互動情形

Chrome 68

• 積極評估
• 引數提示
• 函式自動完成
• ES2017 關鍵字
• 「Audits」面板中的 Lighthouse 3.0 頁面
• BigInt 支援
• 將屬性路徑新增至「Watch」窗格
• 「顯示時間戳記」已移至「設定」
• 額外提示：較不為人知的主控台方法 (影片)

Chrome 67

• 搜尋所有網路標頭
• CSS 變數值預覽
• 複製為擷取內容
• 新增稽核功能、桌面設定選項及查看追蹤記錄
• 停止無限迴圈
• 「成效」分頁中的使用者載入時間
• 「記憶體」面板中清楚列出的 JavaScript VM 執行個體
• 「Network」分頁已重新命名為「Page」分頁
• 深色主題更新
• 「安全性」面板中的憑證透明化資訊
• 「效能」面板中的網站隔離功能
• 額外提示：「Layers」面板 + Animations Inspector (影片)

Chrome 66

• 「網路」面板中的黑邊
• 在裝置模式中自動調整縮放功能
• 「預覽」和「回應」分頁中的美化列印功能
• 在「預覽」分頁中預覽 HTML 內容
• 本機覆寫支援 HTML 內部的樣式
• 額外訣竅：黑箱架構指令碼，讓事件監聽器中斷點更實用

Chrome 65

• 本機覆寫
• 全新無障礙工具
• 變更分頁
• 新的搜尋引擎最佳化 (SEO) 與效能稽核
• 「效能」面板顯示多個錄製內容
• 透過非同步程式碼，與工作站執行可靠的程式碼步驟
• 額外提示：透過 Puppeteer 自動執行開發人員工具操作 (影片)

Chrome 64

• 效能監控
• 管理中心側欄
• 將類似的控制台訊息分組
• 額外提示：切換懸停虛擬類別 (影片)

Chrome 63

• 支援多重用戶端遠端偵錯功能
• Workspace 2.0
• 4 項新稽核
• 使用自訂資料模擬推播通知
• 使用自訂代碼觸發背景同步處理事件
• 額外訣竅：事件監聽器中斷點 (影片)

Chrome 62

• 控制台中的頂層等候功能
• 全新螢幕截圖工作流程
• CSS 格線醒目顯示功能
• 用於查詢物件的新版 Console API
• 新版控制台篩選器
• 「網路」面板中的 HAR 匯入項目
• 可預覽的快取資源
• 更多可預測的快取偵錯功能
• 區塊層級程式碼涵蓋率

Chrome 61

• 行動裝置節流模擬
• 查看儲存空間用量
• 查看 Service Worker 快取回應的時間
• 透過指令選單啟用 FPS 計量器
• 設定縮放或捲動的滑鼠滾輪行為
• 對 ES6 模組的支援

Chrome 60

• 新增稽核面板
• 第三方徽章
• 「繼續前往這裡」的新手勢
• 逐步進行非同步操作
• 在控制台中以更豐富的物件預覽功能
• 在控制台中選取更豐富的背景資訊
• 「涵蓋範圍」分頁中的即時最新消息
• 更簡易的網路節流選項
• 預設啟用非同步堆疊

Chrome 59

• CSS 和 JS 程式碼涵蓋率
• 整頁螢幕截圖
• 封鎖要求
• Step over async
• 統一指令選單