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

全新 CSS 長度編寫工具

開發人員工具新增了更簡單、更彈性的方式,可用於更新 CSS 中的長度!

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

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

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

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

Chromium 問題:11261781172993

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

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

在「問題」分頁中,將遊標移到要隱藏的問題上。依序點選「更多選項」更多   >「隱藏這類問題」

隱藏問題選單

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

「隱藏的問題」窗格

Chromium 問題:1175722

改善屬性顯示方式

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

  • 請一律先在「Console」、「Sources」面板和「Properties」窗格中將自己的屬性排序。
  • 壓平合併「Properties」(屬性) 窗格中顯示的屬性。

舉例來說,以下程式碼片段會建立 URL 物件 link,其中包含 2 個屬性:useraccess,並更新繼承屬性 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) 而言更是如此。

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

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

展開屬性

Chromium 問題:10768201119900

Lighthouse 面板中的 8.4 燈塔

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

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

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

Chromium 問題:772558

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

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

運用程式碼片段功能,更快速地執行指令。請觀看這部影片瞭解訣竅!

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

Chromium 問題:1243976

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

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

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

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

Chromium 問題:12462451245481

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

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

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

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

指令選單

Chromium 問題:1201997

下載預覽頻道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。