What's 開發人員工具的新功能 (Chrome 95)

Jecelyn Yeen

全新 CSS 長度編寫工具

開發人員工具新增了更簡單且彈性的 CSS 長度更新方式！

在「Styles」窗格中，找出任何具有長度的 CSS 屬性 (例如 height、padding)。

將滑鼠游標懸停在單位類型上，並注意單位類型會加上底線。按一下該圖示，從下拉式選單中選取單位類型。

將滑鼠游標懸停在單位值上，滑鼠游標就會變成水平游標。水平拖曳即可增加或減少值。如要將值調整 10，請在拖曳時按住 Shift 鍵。

你仍可將單位值當成文字編輯，只要按一下該值即可開始編輯。

Chromium 問題：1126178、1172993

隱藏「問題」分頁中的問題

您現在可以在「Issues」分頁中隱藏特定問題，只專注於您重視的問題。

在「Issues」分頁中，將滑鼠游標懸停在要隱藏的問題上。依序點選「更多選項」更多   >「隱藏這類問題」。

隱藏問題選單

所有隱藏的問題都會新增至「隱藏的問題」窗格下方。展開窗格。您可以取消隱藏所有隱藏的問題或特定問題。

「隱藏的問題」窗格

Chromium 問題：1175722

改善屬性顯示方式

開發人員工具可透過以下方式改善屬性顯示方式：

  • 在「控制台」、「來源」面板和「屬性」窗格中，請一律以粗體顯示並優先排序自己的資源。
  • 在「Properties」窗格中展開屬性顯示畫面。

舉例來說，以下程式碼片段會建立 URL 物件 link，其中包含 2 個屬性：user 和 access，並更新繼承屬性 search 的值。

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

請嘗試在控制台中記錄 link。自有資源現在會以粗體顯示並優先排序。這些變更可讓您更輕鬆地找出自訂屬性，尤其是含有許多繼承屬性的 Web API (例如 URL)。

自有資源會以粗體顯示，並優先排序

除了這些變更之外，Properties 窗格中的屬性也已扁平化，以便提供更優質的 DOM 屬性偵錯體驗，特別是針對Web 元件。

展開屬性

Chromium 問題：1076820、1119900

Lighthouse 8.4 在 Lighthouse 面板中

Lighthouse 面板目前執行 Lighthouse 8.4。Lighthouse 現可偵測 最大內容繪製 (LCP) 元素是否為延遲載入的圖片，並建議移除其中的 loading 屬性。

如要進一步瞭解更新內容，請參閱「Lighthouse 8.4 的新功能」。

Lighthouse 報表中的延遲載入 LCP 稽核

Chromium 問題：772558

在「來源」面板中排序片段

「Sources」面板下方「Snippets」窗格中的「Snippets」現在會依字母順序排序。先前並未排序。

運用程式碼片段功能，加快指令執行速度。觀看這部影片，瞭解相關訣竅！

在「來源」面板中排序片段

Chromium 問題：1243976

新增翻譯版本資訊的連結，以及檢舉翻譯錯誤

您現在可以透過「What’s new」分頁，點選閱讀開發人員工具的其他 6 種語言版本的發布說明，包括俄文、中文、西班牙文、日文、葡萄牙文和韓文。

自 Chrome 94 起，您可以在開發人員工具中設定偏好語言。如果您發現翻譯有任何問題，請透過「更多選項」 >「說明」 >「回報翻譯錯誤」，回報翻譯問題，協助我們改善翻譯品質。

新增翻譯版本資訊的連結，以及檢舉翻譯錯誤

Chromium 問題：1246245、1245481

改善開發人員工具指令選單的使用者介面

你是否發現在指令選單中搜尋檔案很困難？好消息！指令選單使用者介面現已強化！

開啟指令選單，使用鍵盤快速鍵搜尋檔案：Windows 和 Linux 為 Control + P，macOS 為 Command + P。

我們仍在改善指令選單的 UI，敬請期待更多更新！

指令選單

Chromium 問題：1201997

下載預覽管道

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

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

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

開發人員工具的新功能

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