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

預先發布版功能：整頁無障礙功能樹狀結構

新的全頁無障礙樹狀圖可讓您輕鬆掌握全頁無障礙樹狀圖，並進一步瞭解網頁內容如何向輔助技術公開。

在「Elements」面板中，開啟「Accessibility」窗格，然後選取「Enable full-page accessibility tree」核取方塊。接著重新載入開發人員工具，您會在「Elements」面板中看到新的無障礙功能按鈕。

您可以點選該圖示切換至整頁無障礙功能樹狀結構檢視畫面。您可以在「Accessibility」窗格中展開節點，或點選節點查看詳細資料。

選取節點，然後切換回 DOM 樹狀結構檢視畫面。系統現在會選取對應的 DOM 節點。這麼做有助於瞭解 DOM 節點與其無障礙樹狀結構節點之間的對應關係。這也適用於 DOM 樹狀結構 ⬌ 無障礙樹狀檢視畫面！

先前無障礙功能樹狀結構可在「無障礙功能」窗格中使用。這個檢視畫面功能有限，只能探索單一節點及其祖系。

我們的團隊仍在積極開發這個預先發布版功能，歡迎提供意見回饋，協助我們進一步改善功能！

Chromium 問題：887173

在「變更」分頁中進行更精確的變更

「Changes」分頁中的程式碼變更會自動以美化格式顯示。

先前，由於所有程式碼都會顯示在單一行中，因此很難追蹤經過壓縮的來源程式碼的實際變更。

Chromium 問題：1238818、1268754、1086491

為使用者流程錄製作業設定較長的逾時時間

你現在可以調整錄音工具中所有步驟或特定步驟的「逾時」設定。這項功能特別適合用於網路要求速度緩慢且動畫時間過長的網頁。

舉例來說，我在這個示範頁面上記錄使用者流程，以便載入及點選選單項目。不過，選單項目的載入速度較慢 (需要 6 秒)。這個使用者流程的重播作業失敗，因為重播時間超過 5 秒 (預設逾時時間)。

我們可以使用新的逾時設定來修正這個問題。展開我們按一下選單項目的步驟。編輯步驟：新增逾時，並將其設為 6000 毫秒 (等於 6 秒)。

您可以選擇調整所有步驟的重播設定中的逾時時間。展開「重播設定」並編輯「逾時」值。

Chromium 問題：1257499

使用「往返快取」分頁，確認網頁是否可快取

往返快取 (或 bfcache) 是一種瀏覽器最佳化功能，可以即時往返瀏覽。

新的「返回/前進快取」分頁可協助您測試網頁，確保網頁已針對 bfcache 進行最佳化，並找出可能導致網頁不符合資格的任何問題。

如要測試特定網頁，請在 Chrome 中前往該網頁，然後在開發人員工具中依序前往 [應用程式] > [往返快取]。接著，請按一下「Test back/forward cache」按鈕，開發人員工具就會嘗試前往其他頁面，然後返回，以判斷是否可以從 bfcache 還原頁面。

網頁開發人員必須瞭解如何在所有瀏覽器中為 bfcache 最佳化網頁，因為這麼做可大幅改善使用者的瀏覽體驗，尤其是網路/裝置速度較慢的使用者。

Chromium 問題：1110752

新的「Properties」窗格篩選器

如果您想著重於「屬性」窗格中的特定屬性，現在可以在新的「篩選器」文字方塊中輸入該屬性的名稱或值。

根據預設，系統不會顯示值為 null 或 undefined 的資源。勾選「全部顯示」核取方塊，即可查看所有屬性。

這些強化功能可讓你更快前往所需的房源，進而提升工作效率！

Chromium 問題：1269674

模擬 CSS 強制色彩媒體功能

forced-colors CSS 媒體功能可用於偵測使用者代理程式是否已啟用強制色彩模式 (例如 Windows 高對比模式)，在該模式下，系統會強制使用使用者在頁面上選擇的有限調色盤。

開啟指令選單，執行顯示算繪指令，然後設定模擬 CSS 媒體功能強制色彩下拉式選單。

Chromium 問題：1130859

懸停時顯示尺規指令

您現在可以開啟「Command」選單並執行「懸停在遊標時顯示尺規」指令。您可以使用頁面尺規輕鬆測量元素的寬度和高度。

以往，您只能透過 [設定] > [顯示尺規] 核取方塊來啟用頁面尺規。

Chromium 問題：1270562

在 Flexbox 編輯器中支援 row-reverse 和 column-reverse

Flexbox 編輯器新增了兩個按鈕，以便支援 flex-direction 中的 row-reverse 和 column-reverse。

Chromium 問題：1263866

新的鍵盤快速鍵，可重播 XHR 並展開所有搜尋結果

在「網路」面板中重播 XHR 的鍵盤快速鍵

在「Network」面板中選取 XHR 要求，然後按下鍵盤上的 R 鍵，即可重播 XHR。先前，您只能透過內容選單 (右鍵按一下 >「Replay XHR」) 重播 XHR。

Chromium 問題：1050021

使用鍵盤快速鍵展開所有搜尋結果

我們在「搜尋」分頁中新增了一個捷徑，可讓您展開及收合所有搜尋結果。先前，你只能一次點選一個檔案，才能展開及收合搜尋結果。

依序按下 Esc > 3 點圖示選單 >「搜尋」，開啟搜尋分頁。輸入搜尋字串 (例如函式) 並按下 Enter 鍵，查看搜尋結果清單。專心瀏覽搜尋結果，並使用下列捷徑展開/收合搜尋檔案：

• Windows / Linux - Ctrl + Shift + { 或 }
• MacOS - Cmd + Options + { 或 }

請參閱鍵盤快速鍵，瞭解 Chrome 開發人員工具中的鍵盤快速鍵。

Chromium 問題：1255073

Lighthouse 面板中的 9 號燈塔

Lighthouse 面板目前執行 Lighthouse 9。Lighthouse 現已列出共用相同 ID 的所有元素。

非專屬元素 ID 是常見的無障礙功能問題。舉例來說，aria-labelledby 屬性中參照的 ID 會用於多個元素。

請參閱 Lighthouse 9.0 的新功能，進一步瞭解更新內容。

​

Chromium 問題：772558

改善「來源」面板

我們已升級「Sources」面板，以便使用 CodeMirror 6，因此許多穩定性功能都已改善。以下是幾項值得注意的改善項目：

• 開啟大型檔案 (例如 WASM、JavaScript) 時的速度大幅提升
• 逐行執行程式碼時不會再隨機捲動
• 針對可編輯的來源 (例如網站簡介、本機覆寫) 改善自動完成建議

Chromium 問題：1241848

其他精選內容

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

• 正確顯示網路要求的階層圖表。先前樣式已損壞。(1275501)
• 如果在「來源」面板中搜尋含有極長文字的文件，程式碼醒目顯示功能會無法正常運作。這個問題現已修正。(1275496)。
• 網路要求中沒有重複的「Payload」分頁。(1273972)。
• 修正「成效」面板「摘要」部分缺少的版面配置時間差異詳細資料。(1259606)
• 在網路搜尋查詢中支援任意字元 (例如 ,、.)。(1267196)

[實驗功能] Reporting API 窗格中的端點

Chrome 96 推出了實驗性的 Reporting API 面板，協助您監控網頁產生的報表和報表狀態。

「Endpoints」部分現已推出。可讓您概略瞭解 Reporting-Endpoints 標頭中設定的所有端點。

瞭解如何使用Reporting API 監控安全違規、已淘汰的 API 呼叫等。

Chromium 問題：1200732

下載預覽頻道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。