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

Jecelyn Yeen

無效 CSS 屬性的提示

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

無效 CSS 屬性的提示。

Chromium 問題：1178508

在「Recorder」面板中自動偵測 XPath 和文字選取器

「Recorder」面板現在支援 XPath 和文字選取器。開始記錄使用者流程後，錄音工具會自動為元素選擇 XPath 和最小的不重複文字做為選取器。

XPath 和文字選取器。

Chromium 問題：1327206、1327209

逐步檢查以半形逗號分隔的運算式

您現在可以在偵錯的過程中逐步使用以逗號分隔的運算式。這有助於改善壓縮程式碼的偵錯能力。

請逐步完成以半形逗號分隔的運算式。

開發人員工具先前僅支援逐步使用分號分隔的運算式。

以下方程式碼為例

function foo() {}

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

譯者和壓縮器可能會將其轉換為以半形逗號分隔的運算式。

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

這會在偵錯期間造成混淆，因為壓縮和編寫的程式碼之間會有所不同。根據原始程式碼，使用原始碼對應對經過壓縮的程式碼進行偵錯時，會更加令人困惑，因為開發人員接著會查看分號 (在工具鍊中將這些分號轉換為逗號)，但偵錯工具並未停止。

Chromium 問題：1370200

改良「忽略清單」設定

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

「忽略清單」分頁。

Chromium 問題：1356517

其他精選內容

這個版本包含以下重大修正項目：

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

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

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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