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

Sofia Emelianova
Sofia Emelianova
GitHub

逐步淘汰第三方 Cookie

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

根據預設，所有 Chrome 使用者皆已啟用「包含第三方 Cookie 問題」核取方塊。核取方塊，因此現在「問題」分頁會顯示警告，讓你知道哪些 Cookie 會受到即將淘汰及淘汰第三方 Cookie 的影響。如果不想再看到這些問題，你可以隨時取消勾選核取方塊。

警告訊息：關於「問題」分頁即將淘汰的第三方 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 Analysis Tool。

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

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

詳情請參閱回報問題指南。

強化的忽略清單

node_modules 的預設排除模式

這個版本會在 [設定]。 設定 >「忽略清單」中，將預設規則運算式設為自訂排除規則。為了方便您只專注於程式碼，Debugger 現在預設會略過 /node_modules/ 和 /bower_components/ 的指令碼。您隨時可以前往設定頁面停用這項規則。

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

Chromium 問題：1496301。

如果偵測到或傳遞未忽略的程式碼，現在就會停止執行

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

  • 在呼叫堆疊中未忽略的影格中發現例外狀況。
  • 捕捉在呼叫堆疊中傳遞非忽略影格的例外狀況。例如，請參閱螢幕截圖。

在傳遞到未忽略的程式碼時，暫停接收到的例外狀況。

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

  1. 開啟開發人員工具 > 來源，將 hidden 資料夾加入忽略清單，然後勾選 核取方塊。「在偵測到的例外狀況時暫停」。
  2. 在網頁上的情境清單「已釣到」下方，點選其他按鈕，即可查看在下列情況中暫停執行程序。

為了在非同步呼叫中擷取和/或未偵測到的例外狀況 (當勾選時) 暫停執行，「Debugger」會在承諾的情況下尋找拒絕處理常式。從這個版本開始，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 個節點的網址

現在「Elements」面板會在 #document 節點旁邊顯示 documentURL，方便您輕鬆對 iframe 偵錯。

上一個和之後將文件網址顯示在 #document 節點旁邊。

Chromium 問題：1376976。

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

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

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

Chromium 問題：1424714。

改善動畫偵錯功能

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

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

Chromium 問題：1492460、1489721。

控制台「來源」和「Self-XSS」警告中會顯示「你信任這個程式碼嗎？」對話方塊

核取方塊。 貼上程式碼時顯示 Self-XSS 相關警告 實驗。Self-XSS (自我跨網站指令碼) 是一種攻擊，會誘騙您將惡意程式碼貼到 DevTools 中，讓攻擊者取得您的網頁帳戶和個人資訊的控制權。

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

將程式碼貼到來源時，出現「你信任這個程式碼嗎？」對話方塊。

Chromium 問題：345205。

網路工作站和 Worklet 中的事件監聽器中斷點

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

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

Chromium 問題：1445175。

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

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

已為音訊和影片代碼啟用新版媒體徽章。

這項功能仍在開發階段，未來將會進一步改善。開發人員工具團隊想向 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)。
  • 「Application」 >「Background services」：現在調整大小時，頂端動作列會將文字自動換行 (1487276)。
  • 「Elements」(元素) >「Styles」(樣式)：
    • 修正運算單元元素繼承的 CSS 變數解析度 (1492162)。
    • 現在停用 CSS 屬性時，系統會移除註解，修正語法中斷問題 (1101224)。
  • 網路：「優先順序」欄現在會顯示工具提示，提供初始優先順序的資訊 (勾選「大型要求資料列」時會顯示此資訊) (1495735)。
  • 淘汰項目：
    • 舊版中的「顏色格式」設定已停用，目前已移除。
    • 由於覆寫設定簡化 (1473681) 使用率偏低，因此「來源」中的「刪除所有覆寫」選項現已移除。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 在開發人員工具中，依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59