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

Jecelyn Yeen

全新 CSS 長度編寫工具

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

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

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

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

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

Chromium 問題：1126178、1172993

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

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

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

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

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

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

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 開發人員工具團隊聯絡

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

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

開發人員工具的新功能

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