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

Jecelyn Yeen

提供非現用 CSS 屬性的提示

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

Chromium 問題：1178508

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

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

Chromium 問題：1327206、1327209

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

您現在可以在偵錯期間逐步執行以半形逗號分隔的運算式。這有助於偵錯壓縮後的程式碼。

先前，開發人員工具只支援逐步執行以半形分號分隔的運算式。

假設有下列程式碼：

function foo() {}

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

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

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

這會在偵錯期間造成混淆，因為縮排程式碼和撰寫程式碼的逐步執行行為不同。如果使用來源對應來偵錯原始程式碼中的縮小程式碼，情況會更加令人困惑，因為開發人員會看到分號 (工具鍊在幕後將分號轉換為半形逗號)，但偵錯工具不會在這些分號上停止。

Chromium 問題：1370200

改善忽略清單設定

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

Chromium 問題：1356517

其他亮點

這個版本的重要修正項目包括：

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

下載預覽版頻道

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

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

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

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

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