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

Jecelyn Yeen

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

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

在「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 中前往該網頁，然後在開發人員工具中依序前往「Application」 >「Back-forward Cache」。接著，請按一下「Test back/forward cache」按鈕，開發人員工具就會嘗試離開及返回，判斷是否可以從 bfcache 還原頁面。

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

「往返快取」分頁

Chromium 問題：1110752

新的「Properties」窗格篩選器

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

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

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

「Properties」窗格篩選器

Chromium 問題：1269674

模擬 CSS 強制色彩媒體功能

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

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

CSS forced-colors 媒體功能

Chromium 問題：1130859

懸停時顯示尺規指令

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

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

懸停時顯示尺規指令

Chromium 問題：1270562

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

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

Flexbox 編輯器

Chromium 問題：1263866

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

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

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

重播 XHR

Chromium 問題：1050021

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

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

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

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

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

Chromium 問題：1255073

Lighthouse 9 在 Lighthouse 面板中

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

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

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

​Lighthouse 稽核顯示兩個元素都具有相同的 `id`，而這兩個元素都符合「所有可聚焦的元素都必須擁有專屬的 `id`」

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 呼叫等。

Reporting API 窗格

Chromium 問題：1200732

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。