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

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

有了全新的全頁無障礙樹狀結構，您就能輕鬆查看全頁的無障礙樹狀結構，進一步瞭解網頁內容向輔助技術公開的方式。

在「元素」面板中開啟「無障礙」窗格，然後勾選「啟用整頁模式的無障礙功能樹狀結構」核取方塊。接著重新載入開發人員工具，您會在「元素」面板中看到新的無障礙按鈕。

按一下即可切換至「整頁模式的無障礙功能樹狀結構」檢視畫面。您可以展開節點或點選，在「無障礙」窗格中查看詳細資料。

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

先前無障礙功能樹狀結構位於「無障礙功能」窗格中。檢視畫面有限，只能探索單一節點及其祖先。

我們的團隊仍在積極開發這項預先發布功能。我們期待收到你的意見，以利進一步改善！

Chromium 問題：887173

「變更」分頁顯示更精確的變更

「變更」分頁中的程式碼變更會自動經過美化處理。

先前，由於所有程式碼都顯示在一行中，因此很難追蹤壓縮原始碼的實際變更。

Chromium 問題：1238818、1268754、1086491

延長使用者流程記錄的逾時時間

您現在可以在「記錄器」中，為所有步驟或特定步驟調整「逾時」設定。如果網頁的網路要求速度緩慢，且動畫時間很長，這項功能就特別實用。

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

我們可以利用新的「逾時」設定修正這個問題。展開我們點選選單項目的步驟。編輯步驟：新增逾時，並設為 6000 毫秒 (相當於 6 秒)。

您也可以選擇在所有步驟的「重播設定」中調整「逾時」。展開「重播設定」，然後編輯「逾時」值。

Chromium 問題：1257499

使用「往返快取」分頁，確保網頁可供快取

往返快取 (或 bfcache) 是一種瀏覽器最佳化功能，能讓使用者迅速往返網頁。

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

如要測試特定網頁，請在 Chrome 中前往該網頁，然後在開發人員工具中依序前往「應用程式」 >「返回/轉送快取」。接著，按一下「測試往返快取」按鈕，開發人員工具會嘗試離開並返回，判斷網頁是否可從往返快取還原。

身為網頁開發人員，您必須瞭解如何在所有瀏覽器中，針對 bfcache 最佳化網頁，因為這能大幅提升瀏覽體驗，網路/裝置速度較慢的使用者尤其有感。

Chromium 問題：1110752

新的「屬性」窗格篩選器

如要專注於「屬性」窗格中的特定屬性，現在可以在新的「篩選」文字方塊中輸入該屬性的名稱或值。

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

這些強化功能可讓您更快找到需要的資源，進而提升工作效率！

Chromium 問題：1269674

模擬 CSS forced-colors 媒體功能

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

開啟指令選單，執行「顯示算繪」指令，然後設定「模擬 CSS 媒體功能 forced-colors」下拉式選單。

Chromium 問題：1130859

「懸停時顯示尺規」指令

現在可以開啟「指令」選單，然後執行「在懸停時顯示尺規」指令。頁面尺規可協助您輕鬆測量元素寬度和高度。

先前，您只能透過「設定」>「顯示尺規」核取方塊啟用頁面尺規。

Chromium 問題：1270562

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

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

Chromium 問題：1263866

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

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

在「Network」(網路) 面板中選取 XHR 要求，然後按下鍵盤上的 R 鍵，即可重新傳送 XHR。先前只能透過內容選單重播 XHR (按一下滑鼠右鍵 >「重新提出 XHR 要求」)

Chromium 問題：1050021

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

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

依序按下 Esc 鍵 > 三點選單 >「搜尋」，開啟搜尋分頁。輸入搜尋字串 (例如函式)，然後按下 Enter 鍵，即可查看搜尋結果清單。將焦點放在搜尋結果上，然後使用下列快速鍵展開/收合搜尋檔案：

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

如要參考 Chrome 開發人員工具的鍵盤快速鍵，請前往鍵盤快速鍵。

Chromium 問題：1255073

Lighthouse 面板中的 Lighthouse 9

「Lighthouse」面板現在會執行 Lighthouse 9。Lighthouse 現在會列出共用相同 ID 的所有元素。

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

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

​

Chromium 問題：772558

改良後的「來源」面板

我們將「來源」面板升級為使用 CodeMirror 6，大幅提升穩定性。以下是幾項值得注意的改善項目：

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

Chromium 問題：1241848

其他亮點

這個版本的重要修正項目包括：

• 正確顯示網路要求的刊登序列圖表。先前樣式已損壞，(1275501)
• 在「來源」面板中搜尋含有很長行的文件時，程式碼螢光標註功能會失效。目前已修正此問題。(1275496)
• 網路要求中不會再出現重複的「Payload」分頁。(1273972)
• 修正問題：「成效」面板的「摘要」部分缺少版面配置位移詳細資料。(1259606)
• 支援在網路搜尋查詢中使用任意字元 (例如 ,、.)。(1267196)

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

實驗性的「Reporting API」窗格已在 Chrome 96 中推出，可協助您監控網頁上產生的報表及其狀態。

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

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

Chromium 問題：1200732

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。