本頁面由 Cloud Translation API 翻譯而成。

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

Sofia Emelianova

改善網路面板

更快在本機覆寫網路內容

本機覆寫功能現已簡化，您可以在無法存取「網路」面板中，輕鬆模擬遠端資源的回應標頭和網路內容。

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

要求下拉式選單中的覆寫選項。

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

選取資料夾，並在頂端的動作列中允許存取該資料夾。

覆寫設定完成之後，開發人員工具會導向「來源」 >「覆寫」 >「編輯器」，讓您覆寫網頁內容。

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

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 狀態碼旁顯示使用者可理解的文字，方便您更快瞭解要求發生的情況。

顯示人類可讀 HTTP 狀態碼的前後對照。

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

Chromium 問題：1153956。

JSON 子類型的美化回應

針對包含 application/[subtype]+json MIME 子類型 (例如 ld+json、hal+json 等) 的要求，「Response」分頁現在會正確剖析回應，並讓您進行修飾。

在網路回應預覽畫面中剖析應用程式/JSON 子類型前後的前後對照資料。

Chromium 問題：406900。

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

在「成效」面板的「網路」測試群組中，個別事件的「摘要」會顯示兩個優先順序欄位：「初始優先順序」和「最終優先順序」，而非只有「優先」。透過這個額外欄位，您現在可以查看事件的擷取優先順序是否改變，並調整下載順序。詳情請參閱使用 Fetch Priority API 最佳化資源載入。

依擷取優先順序顯示變更前後。

此外，您也可以在「Network」面板的「Priority」欄中找到相同的資訊，同時啟用「Big request rows」設定。

「網路」面板中的「優先順序」欄。

Chromium 問題：1463901、1380964。

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

系統預設會啟用「設定」 >「偏好設定」 > 「程式碼折疊」選項。這個選項可讓您折疊程式碼區塊。

如要折疊程式碼區塊，請將滑鼠遊標懸停在區塊開始旁邊的行數上，然後按一下收合圖示。按一下 {...} 即可再次展開區塊。

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

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

Chromium 問題：1459193、1336599。

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

為協助打造更能保障隱私權的網路環境，以及與其他瀏覽器的更新同時，Chrome 推出了 Privacy Sandbox 計畫。這項計畫從根本上加強網路隱私保護，並能維護健全的廣告贊助網路環境，確保已過時的第三方 Cookie。Privacy Sandbox 設有逐步淘汰時間表，可讓您舒適地適應變更。

您現在可以測試 Chrome 在第三方 Cookie 淘汰「之後」的行為。方法是透過加上 --test-third-party-cookies-phaseout 旗標的透過指令列執行 Chrome。如要瞭解此標記的用途，請參閱「對 Cookie 進行偵錯」。

無論您的 Chrome 執行方式為何 (無論是否有旗標)，現在「問題」分頁現在都會為所有新的 Chrome 使用者啟用「包括第三方 Cookie 問題」核取方塊，因此發生報告的情形如下：

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

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

如要測試，請前往這個示範網頁檢查 Cookie。

「問題」分頁中回報的第三方 Cookie 問題。

此外，「網路」面板中的「已封鎖的回應 Cookie」篩選器已經過改寫，讓說明只顯示已封鎖的回應 Cookie。

這個核取方塊已啟用，且只會顯示回應 Cookie 遭封鎖的要求。

Chromium 問題：1458839、1462693、1466310。

在應用程式面板中偵錯預先載入功能

Chrome 團隊正在重新針對使用者可能造訪的後續網頁進行完整預先轉譯。如要進行偵錯，開發人員工具會在「Application」面板內新增「Preloading」部分。新的預先擷取和預先算繪功能 (統稱為「導覽預先載入」) 使用推測規則 API，而非連結式資源提示。

您可以前往這個示範頁面，依序前往「Application」(應用程式) >「Preloading」(預先載入) 部分，查看以下項目：

「推測規則」，會列出在目前網頁上找到的所有規則組合。
預先載入，會列出規則集中的所有預先擷取和預先算繪網址。
此頁面會列出目前網頁的預先算繪狀態。

詳情請參閱關於推測規則偵錯的貼文。

Chromium 問題：1410709。

全新色彩

您可能已經注意到，開發人員工具現在經過重新設計，更適合 Chrome 的外觀。其中一項影響因素是新的色彩配置。

套用新顏色的前後對照。

這個版本 (117) 改善了開發人員工具的使用者體驗，包括先前介紹和列出，包括許多改良的 UI 文字。

Chromium 問題：1456677。

Lighthouse 10.4.0 版本

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

例如：

無法檢查導致連結難以區別的連結顏色。

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

Chromium 問題：772558。

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

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

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

Chromium 問題：1410709。

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

CSS 巢狀結構：「Elements」面板現在會顯示巢狀子項的完整選取器鏈結 (1172985)。
「Application」(應用程式) >「Manifest」(資訊清單) 現在有一個「Window Controls Overlay」(視窗控制項重疊) 部分，可檢查資訊清單是否含有 display_override 值，並提供相關說明文件的連結。
「來源」 >「網頁」樹狀檢視現在會執行下列動作，包括但不限於 (1442863)：
- 如果所有內容皆忽略清單，則會以灰色顯示資料夾。
- 如果資料夾的所有內容來自來源對應，則顏色資料夾會以橘色顯示。
效能：現在開始錄製時，「擷取設定」會自動隱藏 (1455498)。
「來源」 >「編輯者」還原了 Ctrl + 方向鍵行為 (Win) 和 Opt + 方向鍵 (1468208)。
現在，「動畫」 >「全部暫停」切換鈕在載入網頁時仍會保持狀態 (1446046)。
「應用程式」 >「儲存空間」 >「快取儲存空間」已移至「應用程式」 >「儲存空間」 >「快取區段」 (1462622)。
改善部分 UI 文字和工具提示：硬體並行工具提示、網路篩選器文字和主選單選項、應用程式樹狀檢視中的大小寫、應用程式 > 標題文字、來源 > 覆寫和檔案系統文字。

全新實驗功能

新的轉譯模擬：`prefers-reduced-transparency`

你的網站使用者可能會開始在自己的裝置上啟用新的實驗性 prefers-reduced-transparency CSS 媒體功能，藉此表示希望降低透明效果。建議您將這項偏好設定納入考量，提升網站的無障礙程度。為協助您，「Rendering」導覽匣分頁現在可以模擬 prefers-reduced-transparency: reduce 設定，方便您設計解決方案的原型，並測試網站在此情況下的行為方式。

如要測試 Chrome 的這項功能，請在 chrome://flags 中啟用實驗性網頁平台功能。

Chromium 問題：1424879。

強化的通訊協定監控

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

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

在「通訊協定監視器」導覽匣分頁的右下角，按一下「顯示 CDP 指令編輯器」，選取目標、開始輸入指令，視需要選取其中一項建議，然後指定參數值，接著按一下 Send 指令 (Ctrl/Cmd + Enter 鍵)。

指定並傳送 CDP 指令。

Chromium 問題：1469345。

下載預覽管道

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

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

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

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