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

Sofia Emelianova
Sofia Emelianova
GitHub

改善網路面板

更快速地在本機覆寫網頁內容

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

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

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

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

選取資料夾，並在頂端的動作列中授予該資料夾的存取權。

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

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

在「網路」面板中的要求旁邊顯示覆寫圖示。

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」分頁現在可正確剖析回應，並讓您進行預先修飾。

在網路回應預覽中剖析 application/json 子類型之前與之後的數值。

Chromium 問題：406900。

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

「成效」面板現在會在「聯播網」追蹤中，事件的「摘要」顯示兩個優先順序欄位：「初始優先順序」和「最終優先順序」，而不是只列出指定的「優先順序」。新增這個額外欄位，您就可以查看事件的擷取優先順序是否有所改變和調整下載順序。詳情請參閱使用 Fetch Priority API 改善資源的載入方式。

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

此外，您也可以在「網路」面板的「優先順序」欄中看到相同的資訊，前提是該資訊已啟用 核取方塊。「大型要求資料列」設定。

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

Chromium 問題：1463901、1380964。

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

。「設定」>偏好設定 >核取方塊。「Code folding」選項現在預設為啟用。這個選項可收合程式碼區塊。

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

此外，。「設定」>偏好設定 >核取方塊。 在側欄中自動顯示檔案現在也已預設為啟用。

這項設定會讓「來源」中的檔案樹狀結構位於「來源」部分 >切換分頁時，「Page」部分選取目前在「Editor」中開啟的檔案。

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」部分。新的預先擷取和預先轉譯 (統稱為「導覽預先載入」) 使用 Speculation Rules API，而非以連結為基礎的資源提示。

進入這個示範頁面，找到「申請」>預先載入部分，即可檢查下列項目：

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

詳情請參閱有關排除推測規則的專屬貼文。

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)。
  • 應用程式 >Manifest 現在包含「Window Controls Overlay」部分，可檢查資訊清單是否含有 display_override 值，並提供相關說明文件的連結。
  • 來源 >頁面樹狀結構現在會執行以下作業，包括但不限於 (1442863)：
    • 如果忽略資料夾中的所有內容，該資料夾將顯示為灰色。
    • 如果資料夾的所有內容都來自來源對應，則會為資料夾標上橘色的色彩。
  • 效能：現在開始錄影時自動隱藏擷取設定 (1455498)。
  • 來源 >編輯器還原了 Ctrl + Ctrl行為 (Win) 和 Ctrl + Ctrl (MacO) (1468208)。
  • 動畫 >「全部暫停」切換按鈕現在會在網頁載入時保留狀態 (1446046)。
  • 應用程式 >儲存空間 >「快取儲存空間」已移至「Application」>儲存空間 >快取部分 (1462622)。
  • 改善部分使用者介面文字和工具提示：硬體並行工具提示、網路篩選器文字和主選單選項、應用程式樹狀檢視 中的大寫、網路 >標頭文字、來源 >覆寫和檔案系統文字。

全新實驗功能

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

您的網站使用者可能會開始在裝置上啟用全新的實驗性 prefers-reduced-transparency CSS 媒體功能，指出他們偏好降低透明效果。您可以考慮採用這項偏好設定，讓網站的無障礙程度更加高。為協助您，「Rendering」導覽匣分頁現可模擬 prefers-reduced-transparency: reduce 設定，方便您設計解決方案的原型，並測試網站在這個情況下的行為。

如要在 Chrome 中測試這項功能，請在 chrome://flags 中啟用實驗性 Web Platform 功能。

Chromium 問題：1424879。

強化通訊協定監控

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

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

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

指定並傳送 CDP 指令。

Chromium 問題：1469345。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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