開發人員工具的新功能 (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」中的檔案樹狀圖在您切換分頁時，選取編輯器中目前開啟的檔案。

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 或開發人員工具的開發人員，通訊協定監控器可讓您查看開發人員工具發出的所有 CDP 要求和回應，並傳送 CDP 指令。

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

核取方塊。

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

指定並傳送 CDP 指令。

Chromium 問題：1469345。

下載預覽管道

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

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

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

開發人員工具的新功能

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