開發人員工具的新功能 (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) 詳細資料。如要查看詳細資料，請前往「應用程式」>Frames (頁框) 選取頁框，然後向下捲動至「Content Security Policy (CSP)」(內容安全政策 (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> 元素啟用新媒體徽章。點選徽章後，系統會將您導向「媒體」面板，方便您偵錯這些元素。

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

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

下載預覽頻道

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

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

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

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

開發人員工具新功能

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