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

Sofia Emelianova
Sofia Emelianova
GitHub

網路面板改善

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

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

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

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

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

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

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

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

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

Chromium 問題：1465785、1470532、1469359。

覆寫 XHR 和擷取要求的內容

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

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

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

在網路回應預覽畫面中，剖析 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。

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

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

這個核取方塊處於啟用狀態，只會顯示已封鎖回應 Cookie 的要求。

Chromium 問題：1458839、1462693、1466310。

在應用程式面板中針對預先載入作業進行偵錯

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)。
  • 「動畫」>「全部暫停」切換鈕現在會在網頁載入時保留其狀態 (1446046)。
  • 將「應用程式」 >「儲存空間」 >「快取儲存空間」移至「應用程式」 >「儲存空間」 >「快取專區」 (1462622)。
  • 我們改善了部分 UI 文字和工具提示：硬體並行作業工具提示、網路篩選器文字和主選單選項、應用程式樹狀檢視畫面中的大寫字母、網路 > 標頭文字、來源 > 覆寫和檔案系統文字。

新的實驗功能

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

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

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

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 最新消息」系列文章中涵蓋的所有內容。