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

Sofia Emelianova
Sofia Emelianova
GitHub

改善元素

全新 CSS 子網格徽章

「Elements」(元素) 面板會獲得用於子網格的新 subgrid 徽章。這項功能目前仍在 Chrome Canary 中屬於實驗性質。

如要檢查子網格 (子網格) 的巢狀格狀檢視畫面並進行偵錯，以便沿用父項的大小和大小，請按一下徽章。可切換重疊元素，在可視區域中的元素上方顯示欄、列及數字。

子格線徽章及可視區域內的疊加層。

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

Chromium 問題：1442536。

工具提示中的選取器詳細程度

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

內含選取器明確權重的工具提示。

Chromium 問題：1204932。

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

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

含有自訂 CSS 屬性值的工具提示。

為了實現這項改善，開發人員工具團隊想向石頭與 Suyan 表達感謝。

Chromium 問題：1380779。

改善來源

CSS 語法醒目顯示

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

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

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

Chromium 問題：1302261、1392085。

用於設定條件中斷點的捷徑

你現在能透過捷徑更快設定條件中斷點。如要開啟中斷點對話方塊，請按住 Command 鍵 (MacOS) 或 Control (Windows / Linux)，然後在「來源」 >「編輯器」左側欄中點選行數。

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

Chromium 問題：1405767。

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

Chrome 的「跳轉追蹤因應措施」實驗可讓您使用跳轉追蹤技術，找出並刪除似乎要執行跨網站追蹤的網站狀態。「應用程式」 >「背景服務」窗格會顯示新的「跳轉追蹤因應措施」分頁，方便您手動強制追蹤因應措施，並列出狀態已刪除的網站。

查看這項安全防護功能：

  1. 在 Chrome 中封鎖第三方 Cookie。前往並啟用 三點圖示選單。 >「設定」 >。「隱私權和安全性」 >「Cookie 和其他網站資料」 > 已勾選圓形按鈕。「封鎖第三方 Cookie」。
  2. 在 chrome://flags 中，將「跳轉追蹤因應措施」實驗設為「啟用並刪除」。
  3. 檢查這個示範頁面，開啟「應用程式」 >「背景服務」 >「跳轉追蹤因應措施」，按一下頁面上的跳出連結，等待 (10 秒) 讓 Chrome 記錄跳出記錄，然後按一下「強制執行」立即刪除狀態。

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

此外，「問題」分頁也會發出警告，說明即將刪除的狀態。

Chromium 問題：1432303。

Lighthouse 10.2.0 版本

Lighthouse 面板現在會執行 Lighthouse 10.2.0。最值得注意的是，最大內容繪製檢查取得表格，包含模擬和開發人員工具節流的相位計算結果。另請參閱完整異動清單。

LCP 階段表。

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

Chromium 問題：772558。

預設忽略內容指令碼

依序按一下 [設定]。「設定」 >「忽略清單」 >核取方塊。「擴充功能插入的內容指令碼」現已預設啟用。

啟用這項設定後：

  • 偵錯工具會忽略這類指令碼，不會停止處理這些指令碼擲回的例外狀況。
  • 「Sources」 >「Call Stack」窗格會略過已忽略的影格。如要略過這個步驟，請勾選 核取方塊。「顯示忽略清單中的影格」。
  • 控制台會在堆疊追蹤中收合遭到忽略的影格。按一下「顯示更多頁框」可展開內容，按一下「顯示較少內容」則可再次收合。

預設啟用擴充功能插入的內容指令碼。依序點選「設定」和「忽略清單」，即可找到這個清單。

此外，「忽略清單」中的核取方塊文字更清楚易懂。

Chromium 問題：1440958、1364501。

網路 > 回應美化排版

根據預設，「網路」 >「回應」窗格現在會美化壓縮回應內文，類似於「來源」面板。

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

此外，SVG 檔案也會醒目顯示語法。

SVG 語法醒目顯示功能。

Chromium 問題：1382752、1385374。

其他精選內容

這個版本包含幾項值得注意的修正和改善項目：

  • [設定]。 「設定」 >「裝置」：在代理程式字串清單中新增「在 Pixel 6 上為 Android v407 專用 Facebook」。
  • 網路：新增「清除網路記錄」捷徑 (1444991)：
    • MacOS：Command + K 鍵
    • Windows/Linux：Control + L 鍵
  • 移除「Recorder」 >「Recording N」 >「Performance Insights」面板下拉式選單選項 (1414773)。
  • 目前無法載入的樣式表現在不會顯示在導覽器樹狀結構中 (1386059)。
  • 效能：修正可展開的互動測試群組 (1432510) 無法正確顯示的問題。
  • 元素：無法載入的樣式表現在會以波浪線底線 (1440626) 底線標記。
  • 如果沒有相應語言的外掛程式 (1443342)，Debugger 並不會自動在 WebAssembly 中完成這個步驟。
  • 系統會還原「Sources」 >「Editor」 (1241848) 中的 CSS 檔案，一次將遊標移動一個字詞的快速鍵：
    • MacOS：Alt + 方向鍵
    • Windows/Linux：Ctrl + 方向鍵

下載預覽管道

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

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

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

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

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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