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

Jecelyn Yeen

新的 CSS 長度編寫工具

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

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

將滑鼠游標懸停在房屋類型上，你會發現房屋類型下方有底線。按一下該欄位，然後從下拉式選單中選取單位類型。

將滑鼠游標懸停在單位值上，游標會變成水平游標。水平拖曳即可調高或調低值。如要以 10 為單位調整值，請在拖曳時按住 Shift 鍵。

你還是可以將單位值視為文字編輯，只要點選該值並開始編輯即可。

Chromium 問題：1126178、1172993

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

您現在可以隱藏「問題」分頁中的特定問題，只專注於自己關心的問題。

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

隱藏問題選單

所有隱藏的問題都會新增至「隱藏的問題」窗格。展開窗格。你可以取消隱藏所有隱藏的問題，或是取消隱藏選取的問題。

「隱藏的問題」窗格

Chromium 問題：1175722

改善屬性顯示方式

開發人員工具會透過下列方式改善屬性顯示方式：

  • 在「控制台」、「來源」面板和「屬性」窗格中，一律先以粗體顯示自有屬性，並依序排列。
  • 在「屬性」窗格中，將屬性顯示畫面扁平化。

舉例來說，以下程式碼片段會建立 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 面板中的 Lighthouse 8.4

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

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

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

Chromium 問題：772558

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

「來源」面板下「程式碼片段」窗格中的程式碼片段現在會依字母順序排序。先前不會排序。

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

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

Chromium 問題：1243976

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

現在只要按一下「新功能」分頁，即可閱讀其他 6 種語言的開發人員工具版本說明，包括俄文、中文、西班牙文、日文、葡萄牙文和韓文。

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

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

Chromium 問題：1246245、1245481

開發人員工具指令選單的 UI 改善

你是否覺得很難在指令選單中搜尋檔案？好消息！指令選單使用者介面現在已升級，

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

指令選單的 UI 改善作業仍在進行中，敬請期待更多更新！

指令選單

Chromium 問題：1201997

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。