本頁面由 Cloud Translation API 翻譯而成。

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

Sofia Emelianova

逐步淘汰第三方 Cookie

您的網站可能會使用第三方 Cookie，且可在淘汰第三方 Cookie 的同時採取行動。請參閱為停用第三方 Cookie 做好準備一文，瞭解如何處理受影響的 Cookie。

根據預設，所有 Chrome 使用者均已勾選「包含第三方 Cookie 問題」核取方塊，因此現在「問題」分頁現在發出警告，說明哪些 Cookie 將受到即將淘汰及逐步淘汰第三方 Cookie 的影響。如果不想再看到這些問題，可以隨時取消勾選此核取方塊。

警告訊息：第三方 Cookie 即將在「問題」分頁中淘汰。

Chromium 問題：1466310。

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

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

若要分析 Cookie：

在 Chrome 中安裝擴充功能。
在單一分頁中開啟您的網站，以取得最準確的分析結果。
開啟開發人員工具並前往「Privacy Sandbox」面板。這個面板可能會隱藏在頂端的下拉式選單按鈕後方。
開啟「Cookie」部分，然後按一下「分析這個分頁」。如果工具找不到任何 Cookie，請嘗試重新載入網頁。

Privacy Sandbox 分析工具。

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

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

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

加強忽略產品資訊

`node_modules` 的預設排除模式

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

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

Chromium 問題：1496301。

如果擷取或傳遞未忽略的程式碼，例外狀況現在會停止執行

當您使用 在已偵測到的例外狀況時暫停對程式碼進行偵錯時，偵錯工具現在會停止在以下這些偵測到的例外狀況 (同步和非同步) 中執行：

在呼叫堆疊中未忽略的影格中擷取的例外狀況。
在呼叫堆疊中通過未忽略的影格擷取的例外狀況。例如螢幕截圖。

在透過未忽略的程式碼傳遞的已擷取例外狀況時暫停。

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

依序開啟開發人員工具 > 來源，將 hidden 資料夾加入忽略清單，然後勾選「當偵測到的例外狀況時暫停」。
在頁面上的「已擷取」情境清單下方，按一下不同按鈕，查看上述情況中的執行作業已暫停。

如要暫停在非同步呼叫中偵測到的例外狀況和/或未偵測到的例外狀況 (檢查時) 執行，Debugger 會在 promise 中尋找拒絕處理常式。從這個版本開始，Debugger 不會再預測 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 進行偵錯，「Elements」面板現在會在 #document 節點旁邊顯示 documentURL。

前後對照會在 #document 節點旁顯示 documentURL。

Chromium 問題：1376976。

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

你現在可以查看已檢查影格的內容安全政策 (CSP) 詳細資料。如要查看詳細資料，請依序前往「應用程式」 >「影格」，選取所需影格，然後向下捲動至「內容安全政策 (CSP)」部分。

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

Chromium 問題：1424714。

改善動畫偵錯功能

在「Animations」分頁中執行下列操作：

按一下時間軸標題上的任一處即可設定播放頭。如果動畫已在播放中，就會繼續播放，反之則停止。以往，您必須拖曳這個元件。
調整名稱欄的大小，即可查看完整的動畫名稱。

Chromium 問題：1492460、1489721。

控制台來源和自我 XSS 警告的「你是否信任這個程式碼？」對話方塊

系統預設會啟用「在貼上程式碼時顯示 Self-XSS 的警告」。Self-XSS (自我跨網站指令碼攻擊) 是一種攻擊手法，會誘騙您將惡意程式碼貼到開發人員工具，讓攻擊者取得您的 Web 帳戶和個人資訊的控制權。

如果您是開發人員工具新手，且您嘗試貼上程式碼，「Sources」面板現在會顯示「Do you 信任 this code?」對話方塊，且「Console」現在會顯示類似的警告。請只貼上您瞭解且已審閱的程式碼。在系統提示時輸入 allow pasting，即可貼上。只要貼上一次，系統就不會再顯示警告。

將程式碼貼到來源時，系統會顯示「您是否信任這個程式碼？」對話方塊。

Chromium 問題：345205。

網路 worker 和 Worklet 中的事件監聽器中斷點

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

在服務工作站呼叫設定的逾時函式時，Debugger 就會暫停。

Chromium 問題：1445175。

「`<audio>`」和「`<video>`」推出的全新媒體徽章

現在可以在「元素」面板中為 <audio> 和 <video> 元素啟用新的媒體徽章。點選徽章後，系統會將您導向「媒體」面板，以便您偵錯這些元素。

這項功能仍在開發階段，日後會進一步改善。開發人員工具團隊想向 Junseo (Jeremy) Yoo 表示感激，幫助大家達成這項改善目標。

Chromium 問題：1448214。

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

為避免使用前一個字詞並更準確地反映行為，「Application」 >「預先載入」已重新命名為「推測載入」。推測載入功能可根據推測規則，為網站預先轉譯及預先擷取最常瀏覽的網頁，而採用幾乎不需立即載入的網頁載入。

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)。
「Application」 >「背景服務」：頂端動作列現在會在調整大小時自動換行 (1487276)。
「Elements」(元素) >「Styles」(樣式)：
- 修正了版位元素沿用 CSS 變數的解析度 (1492162)。
- 現在停用 CSS 屬性時，系統會去除註解中的註解，以修正語法中斷問題 (1101224)。
網路：「Priority」(優先順序) 欄現在會顯示工具提示，提供初始優先順序的資訊 (勾選「Big request rows」(大型要求資料列) 時會顯示相同的資訊) (1495735)。
淘汰項目：
- 先前版本中的「色彩格式」設定已停用，現已移除。
- 由於簡化覆寫作業 (1473681) 後的使用率偏低，來源中的「Delete all 覆寫」選項現已移除。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

使用下列選項，討論文章的新功能和異動，以及其他與開發人員工具相關的事項。

請透過 crbug.com 提交建議或意見回饋。
如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 >「說明」 >「回報開發人員工具的問題」。
在 @ChromeDevTools 張貼推文。
歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。