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

Jecelyn Yeen

無效 CSS 屬性的提示

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

Chromium 問題：1178508

在錄音工具面板中自動偵測 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 版設為預設開發人員版瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

• 歡迎透過 crbug.com 提出建議或意見。
• 使用「更多選項」 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
• 請在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 「開發人員工具」新功能 YouTube 影片或 「開發人員工具」秘訣 YouTube 影片中留言。

開發人員工具新功能

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