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

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

Chromium 問題：1076820、1119900

Lighthouse 面板中的 8.4 燈塔

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

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

Chromium 問題：772558

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

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

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

Chromium 問題：1243976

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

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

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

Chromium 問題：1246245、1245481

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

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

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

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

Chromium 問題：1201997

下載預覽頻道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 歡迎留言分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片。

開發人員工具的新功能

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