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

Jecelyn Yeen

關於停用的 CSS 屬性的提示

開發人員工具現在可找出有效但沒有可見效果的 CSS 樣式。在「Styles」窗格中，開發人員工具會將閒置的屬性淡出。將滑鼠游標懸停在旁邊的圖示上，即可瞭解規則為何沒有明顯效果。

無效 CSS 屬性的提示。

Chromium 問題：1178508

在錄音工具面板中自動偵測 XPath 和文字選取器

錄音工具面板現在支援 XPath 和文字選取器。開始錄製使用者流程，錄製器會自動選取元素的 XPath 和最短的專屬文字做為選取器 (如有)。

錄音工具面板中的 XPath 和文字選取器。

Chromium 問題：1327206、1327209

逐步執行以半形逗號分隔的運算式

您現在可以在偵錯期間逐步執行半形逗號分隔的運算式。這可改善經壓縮的程式碼偵錯能力。

逐步執行以半形逗號分隔的運算式。

先前，DevTools 只支援透過分號分隔的運算式逐步執行。

請參考下列程式碼：

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

轉譯器和縮減器可能會將這些運算式轉換為以半形逗號分隔的運算式。

function bar(){return foo(),foo(),42}

這會在偵錯期間造成混淆，因為精簡和編寫的程式碼之間的逐步執行行為不同。如果使用原始碼的來源對應圖來偵錯經過精簡的程式碼，情況就更令人困惑，因為開發人員會看到分號 (實際上是工具鍊將其轉換為逗號)，但偵錯工具不會在分號處停止。

Chromium 問題：1370200

改善忽略清單設定

依序前往「設定」 >「忽略名單」。開發人員工具已改善設計，協助您設定規則，忽略單一指令碼或指令碼模式。

「忽略清單」分頁。

Chromium 問題：1356517

其他精選內容

以下是這個版本中值得注意的修正項目：

  • 按下空格鍵時，在「Styles」窗格中自動完成 CSS 屬性名稱。(1343316)
  • 移除「元素」面板導覽標記中的自動捲動功能。(1369734)。

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。