開發人員工具的新功能 (Chrome 117)

網路面板改善

更快在本機覆寫網頁內容

現在「本機覆寫」功能已簡化，您不必存取遠端資源，就能輕鬆從「網路」面板模擬回應標頭和網頁內容。

如要覆寫網頁內容，請開啟「網路」面板，在要求上按一下滑鼠右鍵，然後選取「覆寫內容」。

如果您已設定但停用本機覆寫，開發人員工具會啟用這些覆寫。如果尚未設定，開發人員工具會在頂端的動作列中提示您。選取要儲存覆寫項目的資料夾，並允許開發人員工具存取該資料夾。

設定覆寫後，開發人員工具會將您帶往「來源」>「覆寫」>「編輯器」，讓您覆寫網頁內容。

請注意，「網路」面板會以 表示已覆寫的資源。將滑鼠游標懸停在圖示上，即可查看遭到覆寫的項目。

Chromium 問題：1465785、1470532、1469359。

覆寫 XHR 和擷取要求內容

除了回應標頭，您現在也可以覆寫 XHR 和擷取要求內容。有了這類覆寫，即使後端和 API 尚未準備就緒，您也可以模擬 API 回應來偵錯網頁。

開發人員工具目前支援下列要求類型的內容覆寫：圖片 (例如 avif、png)、字型、擷取和 XHR、指令碼 (css 和 js) 和文件 (html)。對於不支援的類型，開發人員工具現在會將「覆寫內容」選項設為灰色。

Chromium 問題：792101、1469776。

隱藏 Chrome 擴充功能要求

為了協助您專注於撰寫的程式碼，並篩除 Chrome 中安裝的擴充功能傳送的不相關要求，「網路」面板新增了篩選器。

如要篩除傳送至 chrome-extension:// 網址的所有要求，請勾選「隱藏擴充功能網址」。

Chromium 問題：1257885、1458803。

人類可讀的 HTTP 狀態碼

要求標頭中的「狀態碼」現在會在 HTTP 狀態碼旁顯示可供人解讀的文字，方便您更快瞭解要求發生了什麼問題。

您也可以將滑鼠游標懸停在要求表格中的狀態碼上，查看相同文字。

Chromium 問題：1153956。

美化 JSON 子類型的回應

現在，如果要求具有 application/[subtype]+json MIME 子類型 (例如 ld+json、hal+json 等)，「回應」分頁會正確剖析回應，並允許您美化回應。

Chromium 問題：406900。

效能：查看網路事件的擷取優先順序變化

「效能」面板現在會在「網路」軌的事件「摘要」中顯示兩個優先順序欄位：「初始優先順序」和「優先順序」 (最終)，而不是只顯示單一「優先順序」。有了這個額外欄位，您現在可以查看事件的擷取優先順序是否變更，並調整下載順序。詳情請參閱「使用 Fetch Priority API 最佳化資源載入作業」。

此外，您也可以在「網路」面板的「優先順序」欄中找到相同資訊，並啟用「大型要求列」設定。

Chromium 問題：1463901、1380964。

預設啟用的「來源」設定：程式碼摺疊和自動顯示檔案

「設定」 >「偏好設定」 >「程式碼摺疊」選項現在預設為啟用。這個選項可讓你摺疊程式碼區塊。

如要摺疊程式碼區塊，請將游標懸停在區塊開頭旁的行號上，然後按一下 收合圖示。按一下 {...} 即可再次展開區塊。

此外，系統現在預設會啟用「設定」 >「偏好設定」 > 「在側邊欄中自動顯示檔案」。

這項設定會讓「來源」>「頁面」中的檔案樹狀結構，在您切換分頁時，選取「編輯器」中目前開啟的檔案。

Chromium 問題：1459193、1336599。

改善第三方 Cookie 問題的偵錯功能

為打造更注重隱私權的網路，並配合其他瀏覽器的更新，Chrome 推出了 Privacy Sandbox 計畫。這項計畫從根本上提升網路隱私權，並以淘汰第三方 Cookie 的方式，維持廣告贊助網路的健全發展。Privacy Sandbox 淘汰時程會分階段進行，讓您有充足時間適應變更。

您現在可以測試 Chrome 在淘汰第三方 Cookie「後」的行為。如要執行這項操作，請透過指令列執行 Chrome，並加上 --test-third-party-cookies-phaseout 旗標。如要瞭解這個標記的作用，請參閱「偵錯 Cookie」。

無論您是否使用這個標記執行 Chrome，「問題」分頁現在都會預設為所有新 Chrome 使用者啟用「包含第三方 Cookie 問題」 核取方塊，因此會回報：

• 即將淘汰的破壞性變更警告。
• 第三方 Cookie 相關問題。

如果您是現有 Chrome 使用者，並想查看即將淘汰 Cookie 的相關警告，請務必勾選這個核取方塊。

如要測試這項功能，請檢查這個範例頁面的 Cookie。

此外，「網路」面板中的「已封鎖的回應 Cookie」篩選器已重新措辭，明確指出該篩選器只會顯示遭封鎖的「回應」Cookie。

Chromium 問題：1458839、1462693、1466310。

在「應用程式」面板中偵錯預先載入

Chrome 團隊將重新推出完整預先算繪功能，預先算繪使用者可能前往的網頁。為方便您偵錯，開發人員工具會在「應用程式」面板中新增「預先載入」部分。新的預先擷取和預先算繪 (統稱為「導覽預先載入」) 功能會使用 Speculation Rules API，而非以連結為準的資源提示。

在這個預先算繪的示範頁面中，您可以檢查「Application」(應用程式) >「Preloading」(預先載入) 部分：

• 「推測規則」，列出目前網頁上的所有規則集。
• 預先載入：列出規則集中的所有預先擷取和預先算繪網址。
• 這個頁面會列出目前網頁的預先算繪狀態。

詳情請參閱專門介紹如何偵錯推測規則的文章。

Chromium 問題：1410709。

新顏色

您可能已經發現，開發人員工具現在採用全新外觀，與 Chrome 更為一致。其中一個因素是新的色彩配置。

這個版本 (117) 進一步改善了開發人員工具的使用者體驗，包括上述和下列項目，以及多項改良的使用者介面文字。

Chromium 問題：1456677。

Lighthouse 10.4.0

「Lighthouse」面板現在會執行 Lighthouse 10.4.0。最值得一提的是，這個版本新增了下列項目的無障礙稽核：

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

例如：

另請參閱完整異動清單。如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：772558。

開發人員工具的 C/C++ WebAssembly 偵錯擴充功能現已開放原始碼

開發人員工具的 C/C++ WebAssembly 偵錯擴充功能現已開放原始碼，並位於 DevTools 前端存放區。這項擴充功能可在開發人員工具中啟用偵錯功能，偵錯編譯為 WebAssembly 的 C++ 程式。詳情請參閱「偵錯 C/C++ WebAssembly」。

瞭解如何建構、執行及測試擴充功能，並歡迎貢獻。

Chromium 問題：1410709。

其他亮點

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

• CSS 巢狀結構：「元素」面板現在會顯示巢狀子項的完整選取器鏈結 (1172985)。
• 「應用程式」>「資訊清單」現在有「視窗控制項疊加」部分，可檢查資訊清單中是否有 display_override 值，並提供相關文件連結。
• 「來源」 >「頁面」樹狀結構現在會執行下列動作，包括但不限於 (1442863)：
  • 如果資料夾中的所有內容都列在忽略清單中，系統會將資料夾標示為灰色。
  • 如果資料夾的所有內容都來自來源地圖，則會以橘色標示。
• 效能：現在開始錄製時，「擷取設定」會自動隱藏 (1455498)。
• 「來源」 >「編輯器」還原了 Ctrl + 箭頭 鍵 (Windows) 和 Opt + 箭頭 鍵 (macOS) 的行為 (1468208)。
• 「動畫」 >「暫停所有動畫」切換按鈕現在會在網頁載入時維持狀態 (1446046)。
• 「應用程式」>「儲存空間」>「快取儲存空間」已移至「應用程式」>「儲存空間」>「快取」部分 (1462622)。
• 改善部分 UI 文字和工具提示：硬體並行工具提示、網路篩選器文字和主選單選項、「應用程式樹狀檢視」中的大寫字母、「網路」>「標頭」文字、「來源」>「覆寫」和「檔案系統」文字。

全新實驗功能

新的算繪模擬：prefers-reduced-transparency

網站使用者可能會開始在裝置上啟用新的實驗性 prefers-reduced-transparencyCSS 媒體功能，表明自己偏好減少透明效果。建議您將這項偏好設定納入考量，以提升網站的無障礙程度。為協助您解決這個問題，「算繪」抽屜式分頁標籤現在可以模擬 prefers-reduced-transparency: reduce 設定，方便您製作解決方案原型，並測試網站在這種情況下的行為。

如要在 Chrome 中測試這項功能，請在 chrome://flags 中啟用「Experimental Web Platform features」。

Chromium 問題：1424879。

強化版通訊協定監測工具

Chrome 開發人員工具會使用 Chrome 開發人員工具通訊協定 (CDP)，對 Chrome 瀏覽器進行檢測、檢查、偵錯及剖析。如果您是 Chromium 或開發人員工具開發人員，可以透過通訊協定監控器查看開發人員工具發出的所有 CDP 要求和回應，並傳送 CDP 指令。

通訊協定監控器採用全新介面，方便您建構及傳送 CDP 指令。現在您不必在說明文件中查詢指令及其參數，開發人員工具會為您建議。

在「通訊協定監控器」抽屜分頁的右下角，按一下 「顯示 CDP 指令編輯器」，選取目標，開始輸入指令，選取建議的指令 (如有需要)，指定參數值，然後按一下 「傳送指令」(Ctrl/Cmd + Enter)。

Chromium 問題：1469345。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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