什麼是開發人員工具？#39;s 開發人員工具新功能 (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

元素改善項目

新 CSS 子格式徽章

元素面板會顯示新的 subgrid 徽章，用於子格。這項功能目前為 Chrome Canary 實驗功能。

如要檢查及偵錯子格狀網格 (即子格狀網格)，並繼承其父項的軌跡數量和大小，請按一下徽章。此方法會切換疊加層，在可視區域的元素上方顯示資料列、資料列數量。

可視區中的子格狀圖章和疊加層。

如需「元素」面板中所有徽章的清單，請參閱徽章參考資料。

Chromium 問題：1442536。

工具提示中的選取器特徵

在「元素」 >「樣式」中，將滑鼠游標懸停在選取器名稱上，即可在工具提示中查看其特定性權重。

顯示選取器特定權重的工具提示。

Chromium 問題：1204932。

工具提示中自訂 CSS 屬性的值

在「元素」 >「樣式」中，將滑鼠游標懸停在自訂 CSS 屬性名稱上，即可在工具提示中查看其值。

提示工具列，其中包含自訂 CSS 屬性的值。

開發人員工具團隊要感謝一絲和蘇燕，讓這項改善措施得以實現。

Chromium 問題：1380779。

改善來源

CSS 語法醒目顯示

來源面板會針對預處理 CSS檔案 (例如 SASS、SCSS 和 LESS) 取得以下資訊：

  • 語法醒目顯示。
  • 內嵌編輯器支援。這些編輯器與「元素」>「樣式」中的編輯器類似，例如「顏色挑選器」和「Easing 編輯器」。

改善「來源」中的 CSS 語法醒目顯示和內嵌編輯器支援功能。

Chromium 問題：1302261、1392085。

設定條件中斷點的捷徑

您現在可以透過捷徑更快速地設定條件中斷點。如要開啟中斷點對話方塊，請按住 Command 鍵 (macOS) 或 Control 鍵 (Windows / Linux)，然後按一下「Sources」 >「Editor」左側欄中的行號。

左欄和中斷點對話方塊中的行號。

Chromium 問題：1405767。

應用程式 > 跳轉追蹤因應措施

Chrome 的跳轉追蹤因應措施實驗可讓您找出並刪除疑似使用跳轉追蹤技術進行跨網站追蹤的網站狀態。「Application」 >「Background Services」窗格會新增「Bounce Tracking Mitigations」分頁，方便您手動強制採用追蹤緩解措施，並列出狀態已刪除的網站。

請參考以下安全防護功能：

  1. 在 Chrome 中封鎖第三方 Cookie。依序前往並啟用 三點圖示選單。 >「設定」 > 。「隱私權和安全性」 >「Cookie 和其他網站資料」 > 已選取圓形按鈕。「封鎖第三方 Cookie」。
  2. 在 chrome://flags 中，將「跳轉追蹤因應措施」實驗設為「啟用並刪除」。
  3. 檢查這個示範頁面，依序開啟「Application」 >「Background Services」 >「Bounce Tracking Mitigations」，按一下頁面上的跳出連結，等待 (10 秒) Chrome 記錄跳出次數，然後按一下「Force run」即可立即刪除狀態。

「跳轉追蹤因應措施」列出狀態刪除作業。

此外，「Issues」分頁會提醒您即將刪除的狀態。

Chromium 問題：1432303。

Lighthouse 10.2.0

Lighthouse 資訊面板現在會執行 Lighthouse 10.2.0。最值得注意的是，最大內容繪製檢查會取得表格，其中包含模擬和 DevTools 節流的階段計算。另請參閱完整變更清單。

LCP 階段表格。

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：772558。

預設忽略內容指令碼

。 設定 >「忽略清單」 > 核取方塊。「擴充功能插入的內容指令碼」現在已預設為啟用。

啟用這項設定後：

  • Debugger 會忽略這類指令碼，不會停下檢查指令碼擲回的例外狀況。
  • 「Sources」 >「Call Stack」窗格會略過遭忽略的畫面。如要關閉略過功能，請勾選 核取方塊。「顯示忽略清單中的影格」。
  • 主控台會在堆疊追蹤記錄中折疊忽略的框架。按一下「顯示更多影格」即可展開，按一下「顯示較少」即可再次收合。

系統預設會啟用擴充功能插入的內容指令碼。請依序前往「設定」和「忽略名單」查看。

此外，忽略清單中的核取方塊文字也更清楚。

Chromium 問題：1440958、1364501。

網路 > 預設回應美化列印

Network > Response 窗格現在預設會以美化格式顯示經過精簡的回應主體，類似於「Sources」窗格。

在「網路」分頁的「回應」視窗中啟用美化列印功能。

此外，SVG 檔案會獲得語法醒目顯示功能。

SVG 語法醒目顯示。

Chromium 問題：1382752、1385374。

其他精選內容

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

  • 。 設定 > 裝置：將 Pixel 6 上的 Android 版 Facebook 407 新增至代理程式字串清單。
  • 網路：新增「清除網路記錄」捷徑 (1444991)：
    • MacOS：Command + K 鍵
    • Windows/Linux：按住 Control 鍵 + 按下 L 鍵
  • 移除「錄製器」 >「錄製 N」 >「成效深入分析面板」下拉式選單選項 (1414773)。
  • 無法載入的樣式表現在會從導覽器樹狀結構中隱藏 (1386059)。
  • 效能：修正展開式「互動」追蹤記錄顯示錯誤的問題 (1432510)。
  • 元素：現在已在無法載入的樣式表下方加上波浪線 (1440626)。
  • 當沒有對應語言的外掛程式時，偵錯工具不會自動在 WebAssembly 中執行逐步執行作業 (1443342)。
  • 在「Sources」 >「Editor」中，CSS 檔案的快捷鍵已恢復，可一次移動一個字詞 (1241848)：
    • MacOS：Alt + 箭頭鍵
    • Windows/Linux：Ctrl + 箭頭鍵

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。