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

Jecelyn Yeen

關於停用的 CSS 屬性的提示

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

無效 CSS 屬性的提示。

Chromium 問題：1178508

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

「Recorder」面板現在支援 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 開發人員工具團隊聯絡

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

開發人員工具的新功能

「開發人員工具新功能」系列中的所有文章清單。