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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步淘汰第三方 Cookie

您的網站可能會使用第三方 Cookie，而我們即將淘汰第三方 Cookie，因此您現在就需要採取行動。如要瞭解如何處理受影響的 Cookie，請參閱「為停用第三方 Cookie 做好準備」。

核取方塊。「含有第三方 Cookie 問題」核取方塊已預設為所有 Chrome 使用者啟用，因此「問題」分頁現在會警告您，哪些 Cookie 會受到即將淘汰第三方 Cookie 的影響。您隨時可以取消勾選，停止顯示這些問題。

「Issues」分頁中顯示的警告，提醒您第三方 Cookie 即將停用。

Chromium 問題：1466310。

使用 Privacy Sandbox 分析工具分析網站的 Cookie

開發人員工具的 Privacy Sandbox Analysis Tool 擴充功能正在積極開發中，最新的預發布版 版本 0.3.2 也已推出。這項工具可讓您瞭解網站如何使用 Cookie，並提供有關新隱私權保護 Chrome API 的相關指引。

如何分析 Cookie：

  1. 在 Chrome 中安裝擴充功能。
  2. 請在單一分頁中開啟網站，以便進行最佳分析。
  3. 開啟開發人員工具，然後前往「Privacy Sandbox」面板。這個面板可能會隱藏在頂端的 更多分頁。 下拉式選單按鈕後方。
  4. 開啟「Cookie」部分，然後按一下「Analyze this tab」。如果這項工具未偵測到任何 Cookie，請嘗試重新載入頁面。

Privacy Sandbox 分析工具。

如要進一步瞭解如何使用 Privacy Sandbox 分析工具 (PSAT)，請參閱以下文章：

  • PSAT's How To。
  • 如要預測淘汰後可能發生的情況，請設定評估環境。
  • 如要找出受影響的部分，請參閱「一般分析動作」。
  • 如要瞭解如何分析常見情境 (包括數據分析、電子商務、單一登入服務、嵌入式內容等)，請參閱「分析情境」中的示範範例。

此外，請參閱回報問題的相關指南。

進階忽略清單

node_modules 的預設排除模式

這個版本會在 。 的「設定」 >「忽略清單」 中，將預設的規則式字串設為自訂排除規則。為協助您專注在程式碼上，Debugger 預設會略過 /node_modules/ 和 /bower_components/ 中的指令碼。您隨時可以在設定中停用這項規則。

新增規則運算式前後的畫面。

Chromium 問題：1496301。

例外狀況現在會在遭到偵測或傳遞非忽略程式碼時停止執行

在勾選 核取方塊。「在遇到例外狀況時暫停」的情況下偵錯程式碼時，Debugger 會在遇到下列已偵測到的例外狀況時停止執行，無論是同步或非同步皆是如此：

  • 在呼叫堆疊中非忽略的框架中擷取的例外狀況。
  • 擷取例外狀況，這些例外狀況會在呼叫堆疊中傳遞未略過的框架。請參考下方螢幕截圖。

在經過非忽略程式碼的已偵測到例外狀況上暫停。

如要測試這項行為，請開啟這個示範頁面：

  1. 依序開啟開發人員工具 >「Sources」，將 hidden 資料夾新增至忽略清單，然後勾選 核取方塊。「Pause on caught exceptions」。
  2. 在頁面上，點選「Caught」情境清單下方的不同按鈕，即可查看執行作業在上述情況下暫停的情形。

如要在非同步呼叫中針對已偵測到的和/或未偵測到的例外狀況 (在勾選時) 暫停執行，偵錯工具會在承諾中尋找拒絕處理程序。從這個版本開始，Debugger 不再預測 Promise.finally() 會擷取例外狀況，這與 try...finally 區塊不會擷取任何例外狀況的情況類似。

Chromium 問題：1489312、1291064。

x_google_ignoreList 已在原始對照圖中重新命名為 ignoreList

原始碼對照圖規格已採用 ignoreList 欄位，而非 x_google_ignoreList，而且 DevTools 現在支援新名稱，並提供舊名稱的備用方案。架構和 bundler 現可使用新的欄位名稱。

來源對應可讓您偵錯自己編寫的程式碼，而非網站提供的經過壓縮的程式碼。

如要進一步瞭解來源對應，請參閱：

在遠端偵錯期間切換新的輸入模式

你現在可以在遠端偵錯 Chrome 分頁時，切換觸控和滑鼠輸入方式。舉例來說，當您使用 --remote-debugging-port=<port> 執行 Chrome 例項，並透過 chrome://inspect/#devices 連線至這個網路目標時。

觀看影片，瞭解輸入模式切換的實際運作情形。

Chromium 問題：1410433。

「Elements」面板現在會顯示 #document 節點的網址

為讓您更輕鬆地對 iframe 進行偵錯，「Elements」面板現在會在 #document 節點旁顯示 documentURL。

前後對照圖顯示 #document 節點旁的 documentURL。

Chromium 問題：1376976。

「Application」面板中有效的內容安全政策

您現在可以查看檢查框架的內容安全政策 (CSP) 詳細資料。如要查看詳細資料，請依序前往「Application」 >「Frames」，選取一個框架，然後向下捲動至「Content Security Policy (CSP)」專區。

「應用程式」分頁中的「內容安全政策」部分。

Chromium 問題：1424714。

改善動畫偵錯功能

您現在可以在「動畫」分頁中執行下列操作：

  • 按一下時間軸標頭上的任何位置，即可設定播放頭。如果動畫已在播放，則會繼續播放，否則會停止播放。先前你必須拖曳。
  • 調整名稱欄的大小，即可查看完整的動畫名稱。

Chromium 問題：1492460、1489721。

來源中的「你是否信任此程式碼？」對話方塊，以及控制台中的「自我 XSS」警告

根據預設，核取方塊。 在貼上程式碼時顯示有關自體 XSS 的警告 實驗已啟用。自體 XSS (自體跨網站指令碼) 是一種攻擊手法，會誘騙您將惡意程式碼貼到 DevTools，讓攻擊者取得您的網路帳戶和個人資訊。

如果您是新手開發人員工具使用者，並且嘗試貼上程式碼，「Sources」面板現在會顯示「Do you trust this code?」對話方塊，而「Console」現在會顯示類似的警告。請只貼上您瞭解且已檢查過的程式碼。如要貼上內容，請在系統提示時輸入 allow pasting。允許貼上內容後，系統就不會再顯示警告。

將程式碼貼到「來源」時，會顯示「你是否信任此程式碼？」對話方塊。

Chromium 問題：345205。

Web Workers 和 Worklet 中的事件監聽器中斷點

在「Sources」 >「Event Listener Breakpoints」中設定事件中斷點後，除了在網站上暫停此事件外，Debugger現在也會在任何類型的 web worker 或 worklet (包括 Shared Storage Worklet) 中發生對應事件時暫停。

服務工作者呼叫設定逾時時間函式時，偵錯工具會暫停。

Chromium 問題：1445175。

<audio> 和 <video> 的新媒體徽章

您現在可以在「Elements」面板中，為 <audio> 和 <video> 元素啟用新的媒體徽章。點選徽章後，系統會帶您前往媒體面板，方便您對這些元素進行偵錯。

啟用音訊和影片標記的新媒體徽章。

這項功能仍在開發中，我們會持續改善，提升服務品質。開發人員工具團隊要感謝 Junseo (Jeremy) Yoo 為我們帶來這項改善。

Chromium 問題：1448214。

預先載入功能已重新命名為「推測載入」

為避免過度使用先前的用語，並更準確反映行為，我們將「Application」 >「Preloading」改名為「Speculative loads」。預測載入功能可根據您定義的預測規則，讓網站預先算繪及預先擷取大多數導向的網頁，以便即時載入網頁。

將預先載入重新命名為推測載入前後的效果。

Chromium 問題：1478888。

Lighthouse 11.2.0

Lighthouse 面板現在執行 Lighthouse 11.2.0。請參閱完整變更清單。

本次更新包括對效能類別的全面改版。系統現在會根據成效指標的預估影響力，為成效洞察評分並排定優先順序。此外，成效評分量表還會提供更詳細的資訊，說明各項指標對評分造成的影響。

成效大改造前後的對照圖。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

無障礙功能改善

這個版本包含下列無障礙功能改善措施：

  • 螢幕閱讀器現在會在「Sources」 >「Breakpoints」下，朗讀核取方塊的狀態 (已勾選或未勾選)。
  • 你現在可以使用鍵盤存取「隱藏類似問題」下拉式選單。

Chromium 問題：1488645、1484918。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • 效能：修正錄製內容中偶爾會缺少 LCP 指標的問題 (1487136)。
  • 預測載入：修正「Network」面板下拉式選單中目標的完整網址 (1471020)。
  • 涵蓋範圍：
    • 修正精美列印程式碼的逐行涵蓋率 (1464974)。
    • 涵蓋率資訊現在會在重新載入頁面時更新 (1494457)。
  • 主控台：
    • 修正訊息中的部分文字選取功能 (1487449)。
    • 修正自動完成下拉式選單的閃爍問題 (1487453)。
    • 支援堆疊路徑中的括號和堆疊追蹤中的網址 (1473926)。
  • 來源：支援 TypeScript using 關鍵字的語法醒目顯示 (1490515)。
  • 快速開啟選單現在會顯示私人方法 (1492957)。
  • 應用程式 > 背景服務：頂端動作列現在會在調整大小時換行文字 (1487276)。
  • 「元素」 >「樣式」：
    • 修正了針對插槽元素的繼承 CSS 變數解析度 (1492162)。
    • 停用 CSS 屬性時，現在會移除其註解，以修正語法中斷問題 (1101224)。
  • Network：現在「Priority」欄會顯示工具提示，提供初始優先順序的相關資訊 (勾選「Big request rows」時也會顯示相同資訊) (1495735)。
  • 淘汰項目：
    • 色彩格式設定已在先前版本中停用，現在已移除。
    • 由於簡化覆寫值後，使用率偏低，因此我們已移除「來源」中的「刪除所有覆寫值」選項 (1473681)。

下載預覽管道

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

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

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

開發人員工具的新功能

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