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

Sofia Emelianova
Sofia Emelianova
GitHub

改善元素

新的 CSS 子格線徽章

「元素」面板會為子類別獲得新的 subgrid 徽章。這項功能目前在 Chrome Canary 中處於實驗階段。

如要檢查並偵錯子格的巢狀格線，進而沿用父項的音軌數量和大小，請按一下標記。會在可視區域切換在元素上方顯示欄、列和號碼。

子格標記和可視區域中的疊加層。

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

Chromium 問題：1442536。

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

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

提供選取器明確程度權重的工具提示。

Chromium 問題：1204932。

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

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

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

開發人員工具團隊想表達你對 S 和 Suyan 的感激，促使他們做出這項改善。

Chromium 問題：1380779。

來源改善功能

CSS 語法醒目顯示

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

  • 語法醒目顯示。
  • 支援內嵌編輯器。這些編輯器和「元素」中的編輯器類似 >樣式，例如 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. 檢查這個示範頁面，然後開啟「Application」>背景服務 >「跳轉追蹤因應措施」、按一下網頁上的跳轉連結，等待 (10 秒) 讓 Chrome 記錄跳出，接著點選 [強制執行] 立即刪除狀態。

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

此外，「Issues」分頁會警告您即將刪除狀態。

Chromium 問題：1432303。

Lighthouse 10.2.0

「Lighthouse」面板現在執行 Lighthouse 10.2.0 版。值得注意的是，Largest Contentful Paint 檢查會產生資料表，其中包含模擬和開發人員工具節流的階段計算。另請參閱完整變更清單。

LCP 階段表格。

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

Chromium 問題：772558。

預設忽略內容指令碼

。「設定」>「忽略清單」>核取方塊。目前預設會啟用擴充功能插入的內容指令碼，

啟用此設定後：

  • 偵錯工具會忽略這類指令碼，不會停止這些指令碼擲回的例外狀況。
  • 來源 >「Call Stack」窗格會略過已忽略的框架。如要關閉這裡的略過功能，請勾選 核取方塊。「顯示忽略清單中的頁框」。
  • 控制台會在堆疊追蹤中收合忽略的影格。按一下「顯示另外 N 個頁框」即可展開，按一下「顯示較少」則可收合內容。

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

此外，「忽略清單」中的核取方塊也會讓文字更清楚明瞭。

Chromium 問題：1440958、1364501。

網路 >預設回應美化排版

網路 >「Response」窗格現在預設會精簡壓縮的回應主體，類似「來源」面板。

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

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

SVG 語法醒目顯示。

Chromium 問題：1382752、1385374。

其他精選內容

這個版本包含多項重要修正和改善項目：

  • 。「設定」>裝置：在代理程式字串清單中新增「適用於 Pixel 6 的 Android 407 版 Facebook」。
  • 網路：新增「清除網路記錄」捷徑 (1444991)：
    • MacOS：Command + K 鍵
    • Windows/Linux：Control + L 鍵
  • 已移除「錄音工具」>記錄 N >「Performance Insights」面板下拉式選單選項 (1414773)。
  • 無法載入的樣式表現在不會顯示在導覽工具的樹狀結構中 (1386059)。
  • 效能：修正可展開式「Interactions」音軌無法正確顯示的問題 (1432510)。
  • 元素：無法載入的樣式表，現在會以波浪號 (1440626) 標示底線。
  • 沒有相應語言的外掛程式時，Debugger 不會在 WebAssembly 中自動逐步執行 (1443342)。
  • 系統會根據「來源」> 中的 CSS 檔案，還原同時移動遊標一個字詞的快速鍵編輯者 (1241848)：
    • MacOS：Alt + 箭頭
    • Windows/Linux：Ctrl + 方向鍵

下載預覽頻道

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

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

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

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

開發人員工具新功能

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