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

Sofia Emelianova
Sofia Emelianova
GitHub

網路面板改善

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

本地覆寫值功能現在已簡化，您可以輕鬆透過「Network」面板模擬回應標頭和遠端資源的網站內容，而無須存取這些資源。

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

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

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

選取資料夾，然後在頂端的操作列中允許存取權。

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

請注意，在「Network」面板中，覆寫的資源會以 已儲存。 表示。將滑鼠游標懸停在圖示上，即可查看覆寫的內容。

網路面板中要求旁邊的覆寫圖示。

Chromium 問題：1465785、1470532、1469359。

覆寫 XHR 和擷取要求的內容

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

DevTools 目前支援下列要求類型的內容覆寫：圖片 (例如 avif、png)、字型、fetch 和 XHR、指令碼 (css 和 js) 以及文件 (html)。對於不支援的類型，DevTools 會將「Override content」選項設為灰色。

Chromium 問題：792101、1469776。

隱藏 Chrome 擴充功能要求

為了讓您能專注於編寫的程式碼，並篩除 Chrome 中可能已安裝的擴充功能傳送的無關要求，我們為「Network」面板新增了篩選器。

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

隱藏擴充功能網址的請求表。

Chromium 問題：1257885、1458803。

人類可讀的 HTTP 狀態碼

要求標頭中的「狀態碼」現在會在 HTTP 狀態碼旁顯示人類可讀的文字，讓您更快瞭解要求發生的情況。

顯示人類可讀的 HTTP 狀態碼前後的畫面。

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

Chromium 問題：1153956。

美化 JSON 子類型的回應

對於含有 application/[subtype]+json MIME 子類型 (例如 ld+json、hal+json 和其他) 的要求，回應分頁現在會正確剖析回應，並讓您美化回應。

在網路回應預覽畫面中，剖析 application/json 子類型前後的畫面。

Chromium 問題：406900。

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

Performance 面板現在會在 Network 追蹤記錄的事件「摘要」中顯示兩個優先順序欄位：Initial Priority 和 (最終) Priority，而非只有單一「Priority」。有了這個額外欄位，您現在可以查看事件的擷取優先順序是否有所變更，並調整下載順序。詳情請參閱「使用 Fetch Priority API 最佳化資源載入」。

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

此外，您也可以在「Network」面板的「Priority」欄中找到相同的資訊，前提是已啟用 核取方塊。「Big request rows」設定。

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

Chromium 問題：1463901、1380964。

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

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

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

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

這項設定會讓「Sources」 >「Page」中的檔案樹狀圖在您切換分頁時，選取在「Editor」中開啟的目前檔案。

Chromium 問題：1459193、1336599。

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

為了打造更私密的網路，並與其他瀏覽器的更新同步，Chrome 推出了 Privacy Sandbox 計畫。這項計畫可從根本上強化網路隱私權，並以不必使用第三方 Cookie 的方式，維持健康的廣告贊助網路環境。Privacy Sandbox 有逐步淘汰時程，讓您能輕鬆適應變化。

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

無論您執行 Chrome 的方式為何 (是否已啟用標記)，現在「Issues」分頁都會為所有新 Chrome 使用者預設啟用 核取方塊。「Include third-party cookie issues」核取方塊，並因此回報：

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

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

如要測試這項功能，請前往這個示範頁面檢查 Cookie。

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

此外，「Network」面板中的「Blocked response cookies」篩選器已重新命名，以便清楚顯示僅顯示已封鎖的「response」Cookie。核取方塊。

勾選方塊後，系統只會顯示回應 Cookie 遭封鎖的要求。

Chromium 問題：1458839、1462693、1466310。

在「Application」面板中偵錯預先載入

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

在這個示範頁面的「Application」 >「Preloading」部分，您可以檢查：

  • 推測規則：列出目前頁面中的所有規則集。
  • 預先載入：列出規則集合中的所有預先擷取和預先轉譯的網址。
  • This Page：列出目前網頁的預先算繪狀態。

詳情請參閱專門針對推測規則偵錯的文章。

Chromium 問題：1410709。

新顏色

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

套用新色彩前後的對照。

這個版本 (117) 為 DevTools 帶來更多使用者體驗改善，包括上述和進一步列出的內容，以及多項改善的 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 巢狀結構：元素面板現在會顯示巢狀子項的整個選取器鏈結 (1172985)。
  • Application > Manifest 現已提供「Window Controls Overlay」部分，可檢查資訊清單中是否有 display_override 值，並提供相關文件的連結。
  • 「來源」 >「頁面」樹狀結構現在會執行下列操作，包括但不限於 (1442863)：
    • 如果資料夾中的所有內容都已列入忽略清單，則會顯示灰色。
    • 如果資料夾中的所有內容都來自來源對應，則會以橘色標示。
  • 效能：擷取設定現在會在您開始錄影時自動隱藏 (1455498)。
  • 來源 > 編輯器 已還原 Ctrl + 箭頭 行為 (Win) 和 Opt + 箭頭 (MacOs) (1468208)。
  • Animations > Pause all 切換鈕現在會在網頁載入時保留狀態 (1446046)。
  • 「應用程式」 >「儲存空間」 >「快取儲存空間」已移至「應用程式」 >「儲存空間」 >「快取區段」 (1462622)。
  • 我們改善了部分 UI 文字和工具提示：硬體並行作業工具提示、網路篩選器文字和主選單選項、應用程式樹狀檢視畫面中的大寫字母、網路 > 標頭文字、來源 > 覆寫和檔案系統文字。

新的實驗功能

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

網站使用者可能會開始在裝置上啟用新的實驗性 prefers-reduced-transparency CSS 媒體功能，表示他們偏好減少透明效果。建議您考慮採用這項偏好設定，提高網站的無障礙性。為協助您，「算繪」抽屜分頁現在可以模擬 prefers-reduced-transparency: reduce 設定，讓您建立解決方案原型，並測試網站在這種情況下的行為。

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

Chromium 問題：1424879。

強化版通訊協定監測工具

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

Protocol monitor 會提供新的介面，讓您更輕鬆地建構及傳送 CDP 指令。您現在不必在說明文件中查詢指令及其參數，開發人員工具會為您提供建議。

核取方塊。

在「Protocol monitor」抽屜分頁的右下角，按一下 開啟左側面板。「Show CDP command editor」，選取目標、開始輸入指令，選取其中一個建議值 (如有需要)，指定參數值，然後按一下 Send.「Send command」(按住 Ctrl/Cmd + 按下 Enter)。

指定並傳送 CDP 指令。

Chromium 問題：1469345。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。