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

元素改善

新的 CSS 子格徽章

「元素」面板會顯示新的 subgrid 徽章，表示 subgrid。這項功能目前為 Chrome Canary 的實驗功能。

如要檢查及偵錯巢狀格線 (即子格線，因此會沿用上層項目的軌數和大小)，請按一下徽章。這會切換疊加層，在可視區域中的元素上方顯示欄、列及其編號。

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

Chromium 問題：1442536。

工具提示中的選取器特異性

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

Chromium 問題：1204932。

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

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

開發人員工具團隊要感謝 一丝和 Suyan 實作這項改善功能。

Chromium 問題：1380779。

來源改善

CSS 語法醒目顯示

「來源」面板會針對預先處理的 CSS 檔案 (例如 SASS、SCSS 和 LESS) 執行下列操作：

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

Chromium 問題：1302261、1392085。

設定條件中斷點的快速鍵

您現在可以透過快速鍵，更快速地設定條件中斷點。如要開啟中斷點對話方塊，請按住 Command 鍵 (MacOS) 或 Control 鍵 (Windows / Linux)，然後點選「來源」 >「編輯器」左欄中的行號。

Chromium 問題：1405767。

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

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

瞭解這項安全防護功能：

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

此外，「問題」分頁也會顯示即將刪除狀態的警告。

Chromium 問題：1432303。

Lighthouse 10.2.0

「Lighthouse」面板現在會執行 Lighthouse 10.2.0。最值得一提的是，「最大內容繪製」檢查會提供表格，其中包含模擬和開發人員工具節流的階段計算結果。另請參閱完整異動清單。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：772558。

預設忽略內容指令碼

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

啟用這項設定後：

• Debugger會忽略這類指令碼，不會停下檢查指令碼擲回的例外狀況。
• 「來源」>「呼叫堆疊」窗格會略過遭忽略的影格。如要在此處關閉略過功能，請勾選「顯示忽略清單中的頁框」。
• 控制台會在堆疊追蹤中摺疊遭忽略的影格。按一下「顯示 N 個以上影格」即可展開，按一下「顯示較少」即可再次收合。

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

Chromium 問題：1440958、1364501。

網路 > 預設以美觀格式列印回應

「網路」 >「回應」窗格現在預設會美化列印縮小的回應主體，與「來源」面板類似。

此外，SVG 檔案會取得語法螢光標示。

Chromium 問題：1382752、1385374。

其他亮點

這個版本的重要修正和改良項目包括：

• 設定 > 裝置：在代理程式字串清單中新增「Facebook for Android v407 on Pixel 6」。
• 網路：新增「清除網路記錄」快速鍵 (1444991)：
  • macOS：Command + K 鍵
  • Windows/Linux：Ctrl + L 鍵
• 移除「記錄器」>「記錄 N」>「效能洞察面板」下拉式選單選項 (1414773)。
• 現在，系統會從導覽器樹狀結構中隱藏無法載入的樣式表 (1386059)。
• 效能：修正可展開的「互動」軌顯示不正確的問題 (1432510)。
• 元素：無法載入的樣式表現在會以波浪底線標示 (1440626)。
• 如果沒有相應語言的外掛程式 (1443342)，Debugger就不會自動介入 WebAssembly。
• 在「來源」>「編輯器」中，CSS 檔案的游標一次移動一個字的捷徑已還原 (1241848)：
  • MacOS：Alt + 方向鍵
  • Windows/Linux：Ctrl + 方向鍵

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。