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) 而言更是如此。

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

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

壓平合併屬性

Chromium 問題:10768201119900

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 問題:12462451245481

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

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

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

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

指令選單

Chromium 問題:1201997

下載預覽頻道

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

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

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

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

開發人員工具新功能

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