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

逐步淘汰第三方 Cookie

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

所有 Chrome 使用者預設都會啟用「含有第三方 Cookie 問題」核取方塊，因此「問題」分頁現在會針對即將淘汰及停用的第三方 Cookie 發出警告。你隨時可以取消勾選核取方塊，停止查看這些問題。

Chromium 問題：1466310。

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

開發人員工具的 Privacy Sandbox 分析工具擴充功能目前正在積極開發中，最新預先發布的版本為 0.3.2。這項工具可協助您瞭解網站如何使用 Cookie，並提供有關全新 Chrome 隱私權保護 API 的指引。

如要分析 Cookie，請按照下列步驟操作：

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

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

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

此外，請參閱「回報問題」一文中的指引。

進階忽略清單

「node_modules」的預設排除模式

這個版本可將預設的規則運算式設為自訂排除規則，方法是依序前往「設定」 >「忽略清單」。為協助您專注於自己的程式碼，Debugger 現在預設會略過 /node_modules/ 和 /bower_components/ 的指令碼。你隨時可以在設定中停用這項規則。

Chromium 問題：1496301。

如果例外狀況遭擷取或通過未忽略的程式碼，現在會停止執行作業

使用 偵錯程式碼時，如果勾選「在遇到例外狀況時暫停」，偵錯工具現在會在遇到下列同步和非同步例外狀況時停止執行：

• 在呼叫堆疊中，非忽略的影格所擷取的例外狀況。
• 在呼叫堆疊中，通過非忽略框架的已擷取例外狀況。例如，請參閱螢幕截圖。

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

1. 開啟開發人員工具 >「來源」，將 hidden 資料夾新增至忽略清單，然後勾選「在偵測到的例外狀況中暫停」。
2. 在頁面的「Caught」情境清單下方，按一下不同按鈕，查看執行作業在上述情況中暫停。

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

Chromium 問題：1489312、1291064。

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

來源對應規格已採用 ignoreList 欄位，取代 x_google_ignoreList，而開發人員工具現在支援新名稱，並會回溯使用舊名稱。架構和打包工具現在可以使用新的欄位名稱。

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

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

• 什麼是來源對應
• 使用來源對應偵錯原始碼，而非已部署的程式碼

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

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

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

Chromium 問題：1410433。

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

為方便您偵錯 iframe，「元素」面板現在會在 #document 節點旁顯示 documentURL。

Chromium 問題：1376976。

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

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

Chromium 問題：1424714。

改善動畫偵錯功能

在「動畫」分頁中，你現在可以：

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

Chromium 問題：1492460、1489721。

「你是否信任此程式碼？」對話方塊 (位於「來源」) 和「控制台」中的自我 XSS 警告

Show warning about Self-XSS when pasting code experiment 已預設為啟用。自我跨網站指令碼攻擊 (self-XSS) 會誘騙您將惡意程式碼貼到開發人員工具中，讓攻擊者掌控您的網路帳戶和個人資訊。

如果您是開發人員工具的新手，並嘗試貼上程式碼，來源面板現在會顯示「您信任這段程式碼嗎？」對話方塊，控制台也會顯示類似的警告。請只貼上您瞭解且檢查過的程式碼。如要貼上，請在系統提示時輸入 allow pasting。允許貼上一次後，系統就不會再顯示警告。

Chromium 問題：345205。

網頁工作人員和工作單元中的事件監聽器中斷點

在「來源」 >「事件監聽器中斷點」中設定事件中斷點時，除了在網站上暫停這個事件，現在「偵錯工具」也會在任何類型的網頁工作人員或工作單元 (包括共用儲存空間工作單元) 中發生相應事件時暫停。

Chromium 問題：1445175。

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

您現在可以在「元素」面板中，為 <audio> 和 <video> 元素啟用新的媒體徽章。按一下徽章後，系統會將你帶往「媒體」面板，方便你偵錯這些元素。

這項功能仍在開發階段，我們會持續改善，開發人員工具團隊要感謝 Junseo (Jeremy) Yoo 協助完成這項改善。

Chromium 問題：1448214。

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

為避免過度使用先前的字詞，並更準確地反映行為，我們將「應用程式」 >「預先載入」重新命名為「推測載入」。推測載入功能會根據您為網站定義的推測規則，預先算繪及預先擷取最常瀏覽的網頁，達到近乎即時的網頁載入速度。

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 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。