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

預覽功能：整頁的無障礙功能樹狀結構

新的整頁無障礙功能樹狀結構可讓您輕鬆瀏覽整個頁面的無障礙功能樹狀結構，以及深入瞭解輔助技術對您網頁內容的暴露程度。

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

按一下該圖示，即可切換至「完整頁面無障礙功能樹狀結構」檢視畫面。您可以直接展開節點，或按一下「無障礙」窗格查看詳細資料。

選取節點並切換回 DOM 樹狀檢視。現在已選取相應的 DOM 節點。如要瞭解 DOM 節點及其無障礙樹狀結構節點之間的對應關係，這是一個絕佳的方式。這也適用於 DOM 樹狀結構 ⬌ 無障礙功能樹狀檢視！

先前「無障礙」窗格會顯示無障礙樹狀結構。檢視區塊受到限制，您只能探索單一節點及其祖系。

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

Chromium 問題：887173

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

「Changes」分頁中的程式碼變更會自動進行美化，

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

Chromium 問題：1238818、1268754、1086491

設定較長的使用者流程記錄逾時時間

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

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

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

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

Chromium 問題：1257499

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

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

全新的「往返快取」分頁可協助您測試網頁，確保網頁已針對 bfcache 進行最佳化，並找出哪些問題導致網頁不合格。

如要測試特定網頁，請在 Chrome 中前往該網頁，然後在開發人員工具中前往「應用程式」>往返快取。接著點選「測試往返快取」按鈕，開發人員工具就會嘗試離開及返回，藉此判斷是否可透過 bfcache 還原頁面。

身為網頁程式開發人員，請務必瞭解如何針對所有瀏覽器進行 bfcache 的網頁最佳化調整，因為這會大幅改善使用者的瀏覽體驗，特別是網路或裝置速度較慢的使用者。

Chromium 問題：1110752

新增屬性窗格篩選器

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

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

您可藉由這些強化項目快速找到常用資源，進而提升工作效率！

Chromium 問題：1269674

模擬 CSS forced-colors 媒體功能

forced-colors CSS 媒體功能用於偵測使用者代理程式是否已啟用強制色彩模式 (例如 Windows 高對比模式)，會在該模式下強制執行使用者選擇的特定色彩調色盤。

開啟「指令選單」，執行「顯示轉譯」指令，然後設定「Emulate CSS media feature forced-colors」下拉式選單。

Chromium 問題：1130859

懸停指令時顯示尺規

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

以往，您只能透過「設定」>顯示尺規核取方塊。

Chromium 問題：1270562

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

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

Chromium 問題：1263866

透過全新鍵盤快速鍵重播 XHR，並展開所有搜尋結果

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

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

Chromium 問題：1050021

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

[搜尋] 分頁中新增捷徑，可讓您展開或收合所有搜尋結果。以往，您一次只能點選一個檔案，才能展開或收合搜尋結果。

透過 Esc 開啟搜尋分頁 >「三點選單」>Search。輸入搜尋字串 (例如函式) 並按下 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

改良版「來源」面板

我們升級使用 CodeMirror 6，但升級後在「Sources」面板中載入多項穩定性改善項目。以下是重要改善項目：

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

Chromium 問題：1241848

其他精選內容

這個版本包含以下重大修正項目：

• 正確顯示網路要求的瀑布圖。以前樣式已損毀。(1275501)。
• 如果在「來源」面板中搜尋含有極長文字的文件，程式碼醒目顯示功能會無法正常運作。不過現在這個問題已經解決。(1275496)。
• 網路要求中沒有重複的「Payload」分頁。(1273972)。
• 修正「Performance」面板「Summary」部分缺少的版面配置位移詳細資料。(1259606)。
• 在「網路搜尋」查詢中支援任意字元，例如 ,、.。(1267196)。

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

Chrome 96 推出了實驗性的 Reporting API 窗格，協助您監控網頁產生的報表及其狀態。

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

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

Chromium 問題：1200732

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

• 歡迎透過 crbug.com 提出建議或意見。
• 使用「更多選項」 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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