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。自有屬性現在以粗體顯示，並優先排序。這些變更方便您找出自訂屬性，尤其是具有許多繼承屬性的 Web API (例如 URL)。

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

除了這些變更之外，「屬性」窗格中的屬性現在也已經過簡化，可提供更優質的 DOM 屬性偵錯體驗 (尤其是針對網頁元件)。

壓平合併屬性

Chromium 問題：1076820、1119900

Lighthouse 面板 8.4 號

Lighthouse 面板現在正在執行 Lighthouse 8.4。Lighthouse 現在會偵測最大壓合繪製 (LCP) 元素是否為延遲載入的圖片，因此建議從中移除 loading 屬性。

如要進一步瞭解本次更新，請參閱 Lighthouse 8.4 新功能。

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

Chromium 問題：772558

排序「來源」面板中的程式碼片段

「Sources」面板下方「snippets」窗格中的程式碼片段現在會按字母順序排序。這個運算子之前不需要排序。

運用程式碼片段功能加快指令執行速度。請觀看這部秘訣，

排序「來源」面板中的程式碼片段

Chromium 問題：1243976

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

現在起，你可以透過「新功能」分頁閱讀開發人員工具的版本資訊 (俄文、中文、西班牙文、日文、葡萄牙文和韓文)。

從 Chrome 第 94 版開始，您可以在開發人員工具中設定偏好的語言。如果你發現翻譯問題，歡迎透過「更多選項」 >「說明」 >「回報翻譯錯誤」回報翻譯問題，協助我們改良翻譯。

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

Chromium 問題：1246245、1245481

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

你是否覺得在「指令選單」中搜尋檔案時感到困難？好消息！指令選單的使用者介面現已改良！

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

「Command」選單的 UI 改善項目仍在開發中，請密切留意最新消息！

指令選單

Chromium 問題：1201997

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59