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

Jecelyn Yeen

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

新的全頁無障礙樹狀目錄可讓您更輕鬆地查看整頁無障礙樹狀目錄，並進一步瞭解您的網頁內容接觸輔助技術的方式。

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

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

選取節點並切換回 DOM 樹狀檢視。現已選取對應的 DOM 節點。如此一來，即可瞭解 DOM 節點與無障礙功能樹狀結構節點之間的對應關係。這也適用於 DOM 樹狀結構 ⬌ 無障礙功能樹狀檢視！

以前的無障礙功能樹狀結構位於「無障礙設定」窗格中。檢視畫面受到限制，因此您只能探索單一節點及其祖系。

我們的團隊仍在積極開發這項預先發布版功能。歡迎您提供意見回饋，協助我們提供更多強化功能！

整頁無障礙樹狀結構

Chromium 問題：887173

在 [變更] 分頁中進行更精細的變更

「Changes」分頁中的程式碼變更會由系統自動列印。

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

變更分頁

Chromium 問題：1238818、1268754、1086491

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

您現在可以在錄音工具中調整所有步驟或特定步驟的「逾時」設定。特別適合使用網路要求緩慢且動畫較長的網頁。

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

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

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

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

Chromium 問題：1257499

透過「往返快取」分頁確保網頁可快取

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

全新的「往返快取」分頁可協助你測試網頁，確保網頁經過最佳化處理，並找出導致網頁不符資格的問題。

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

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

「往返快取」分頁

Chromium 問題：1110752

新增屬性窗格篩選器

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

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

這些強化功能可讓你更快前往想要的車輛，提升工作效率！

屬性窗格篩選器

Chromium 問題：1269674

模擬 CSS forced-colors 媒體功能

forced-colors CSS 媒體功能會用來偵測使用者代理程式是否已啟用強制色彩模式 (例如 Windows 高對比模式)，並強制執行使用者所選有限的調色盤。

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

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」Esc >「三點」Esc選單 >「搜尋」Esc開啟搜尋分頁。輸入搜尋字串 (例如函式)，然後按下 Enter 鍵，即可查看搜尋結果清單。聚焦搜尋結果，並使用下列快速鍵展開/收合搜尋檔案：

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

如需 Chrome 開發人員工具的鍵盤快速鍵參考，請參閱鍵盤快速鍵。

Chromium 問題：1255073

燈塔 9 號燈塔

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

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

如要進一步瞭解本次更新，請參閱 Lighthouse 9.0 的新功能。

​「所有可聚焦元素」的 Lighthouse 稽核

Chromium 問題：772558

改良的「來源」面板

升級至 CodeMirror 6 後，「Sources」面板中的穩定性改善項目載入。以下是一些明顯的改善：

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

Chromium 問題：1241848

其他精選內容

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

  • 正確顯示網路要求的刊登序列圖表。先前，樣式會毀損。(1275501)。
  • 在「來源」面板中搜尋文件時，如果文字行數很長，系統會無法提供醒目顯示的程式碼。不過問題現在已經解決。(1275496)。
  • 網路要求中不會再出現重複的「酬載」分頁。(1273972)。
  • 修正「Performance」面板的「Summary」部分中缺少的版面配置位移詳細資料。(1259606)。
  • 在網路搜尋查詢中支援任意字元，例如 ,、.。(1267196)。

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

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

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

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

Reporting API 窗格

Chromium 問題：1200732

下載預覽管道

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

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

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

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

開發人員工具的新功能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59