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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步淘汰第三方 Cookie

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

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

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

Chromium 問題：1466310。

使用 Privacy Sandbox Analysis Tool 分析網站的 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 Analysis Tool (PSAT)，請參閱以下資源：

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

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

進階忽略清單

node_modules 的預設排除模式

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

加入規則運算式的前後對照值。

Chromium 問題：1496301。

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

勾選 核取方塊。「Pause on caughtException」(在偵測到例外狀況時暫停) 程式碼時，Debugger 現在會停止執行以下這些抓到的例外狀況 (同步和非同步)：

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

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

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

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

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

Chromium 問題：1489312、1291064。

來源對應中的「x_google_ignoreList」已重新命名為「ignoreList」

來源對應規格已採用 ignoreList 欄位，而非 x_google_ignoreList，開發人員工具現已支援新名稱，並可使用舊名稱做為備用。架構和 bundler 現可使用新的欄位名稱。

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

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

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

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

請觀看影片，瞭解如何切換輸入模式。

Chromium 問題：1410433。

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

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

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

Chromium 問題：1376976。

應用程式面板中的有效內容安全政策

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

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

Chromium 問題：1424714。

改善動畫偵錯功能

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

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

Chromium 問題：1492460、1489721。

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

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

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

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

Chromium 問題：345205。

Web Workers 和 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。

改善無障礙功能

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

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

Chromium 問題：1488645、1484918。

其他精選內容

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

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

下載預覽管道

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

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

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

開發人員工具的新功能

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