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

Jecelyn Yeen

全新 CSS 長度編寫工具

開發人員工具已新增更簡單靈活的 CSS 長度更新方式！

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

將滑鼠遊標懸停在單元類型上，您會發現單位類型會加上底線。按一下該單位，即可從下拉式選單中選取單位類型。

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

如要以文字形式編輯單位值，只要點選數值即可開始編輯。

Chromium 問題：1126178、1172993

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

你現在可以在「問題」分頁中隱藏特定問題，只處理自己關心的問題。

在「問題」分頁中，將遊標移到要隱藏的問題上。按一下 [更多選項] 更多 >隱藏這類問題。

隱藏問題選單

所有隱藏的問題都會新增至「已隱藏的問題」窗格。展開窗格。你可以取消隱藏所有隱藏的問題或所選問題，

隱藏的問題窗格

Chromium 問題：1175722

改善屬性的顯示方式

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

  • 請一律先在「Console」、「Sources」面板和「Properties」窗格中將自己的屬性排序。
  • 壓平合併「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。自有屬性現在會以粗體顯示，並優先排序。這些變更可讓您更輕易找出自訂屬性，對於具有許多繼承屬性的網路 API (例如 URL) 而言更是如此。

自有屬性會以粗體顯示，並優先排序

除了這些變更外，「屬性」窗格中的屬性也已經過簡化，以便改善 DOM 屬性偵錯體驗 (尤其是網頁元件)。

壓平合併屬性

Chromium 問題：1076820、1119900

Lighthouse 面板中的 8.4 燈塔

「Lighthouse」面板現在正在執行 Lighthouse 8.4。Lighthouse 現在會偵測最大包含內容繪製 (LCP) 元素是否為延遲載入圖片，並建議從中移除的 loading 屬性。

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

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

Chromium 問題：772558

將「來源」面板中的摘要排序

在「來源」面板下方的「程式碼片段」窗格中，程式碼片段現在會按字母順序排序。先前並不會排序。

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

將「來源」面板中的摘要排序

Chromium 問題：1243976

新增翻譯版本資訊的連結及回報翻譯錯誤

您現在可透過「What's」新分頁，點選俄文、中文、西班牙文、日文、葡萄牙文和韓文等 6 種語言的開發人員工具版本資訊。

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

新增翻譯版本資訊的連結及回報翻譯錯誤

Chromium 問題：1246245、1245481

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

在「指令選單」中搜尋檔案時，你是否覺得很難搜尋？好消息！指令選單使用者介面現在增強了！

開啟指令選單，即可在 Windows 和 Linux 中使用鍵盤快速鍵 Control + P，或在 MacOS 中按下 Command + P 鍵來搜尋檔案。

「指令選單」的使用者介面改良功能仍在持續進行中，敬請密切留意最新消息！

指令選單

Chromium 問題：1201997

下載預覽頻道

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

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

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

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

開發人員工具新功能

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