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

Jecelyn Yeen

Chrome 指南

隆重推出 Chrome 第 100 個版本！Chrome 開發人員工具將持續提供可靠的網路開發工具，協助開發人員建構網路內容。請花點時間點選「新功能」分頁，與我們一同慶祝各個里程碑。

如往常一樣，只要點選圖片，即可觀看最新的 DevTools 新功能影片。

在「樣式」窗格中查看及編輯規則的 @支援

您現在可以在「Styles」窗格中查看及編輯 CSS @supports 規則。這些變更可讓您更輕鬆地即時測試規則。 開啟這個示範頁面並inspect <div class=”box”> 元素，然後在「樣式」窗格中查看 @supports 規則。按一下規則的聲明表單即可編輯。

在規則中查看及編輯 @支援

Chromium 問題：1222574、1222573

改良錄音工具面板

預設支援常用選取器

在錄製期間決定專屬選取器時，「錄音工具」面板現在會自動優先選擇具有下列屬性的元素：

  • data-testid
  • data-test
  • data-qa
  • 資料-cy
  • data-test-id
  • data-qa-id
  • 資料測試

上述屬性是測試自動化作業中使用的常見選取器。

舉例來說，您可以利用這個示範頁面開始錄製新內容。填入電子郵件地址，並觀察選取器值。

由於電子郵件元素已定義 data-testid，因此會自動當做選取器使用，而不是 id 或 class 屬性。

預設支援常用選取器

自訂錄製內容的選取器

如果您不使用常用選取器，可以自訂錄製工具的選取器。

舉例來說，這個示範頁面會使用 data-automate 屬性做為選取器。開始新的記錄，並輸入 data-automate 做為選取器屬性。填入電子郵件地址，並觀察選取器值 ([data-automate=email-address])。

自訂錄製內容的選取器

自訂選取器選取結果

重新命名錄音檔

你可以在「錄音工具」面板中使用錄音檔標題旁邊的編輯按鈕 (鉛筆圖示)，重新命名錄音檔。

重新命名錄音檔

懸停時預覽類別/函式屬性

現在您可以在偵錯期間，將遊標懸停在「Sources」面板中的類別或函式上，預覽屬性。先前，系統只會顯示函式名稱，以及原始碼中位置的連結。

懸停時預覽類別/函式屬性

Chromium 問題：1049947

「效能」面板中呈現局部的影格

效能記錄現在會顯示新的影格類別「部分呈現的影格」「Frames」(頁框) 時間軸上。

先前，「Frames」時間軸會將具有延遲主執行緒作業的影格視覺化，呈現為「遭捨棄的影格」。但在某些情況下，部分影格可能仍會產生由合成器執行緒驅動的視覺更新 (例如捲動)。

這樣會導致使用者混淆，因為這些「捨棄的影格」的螢幕截圖仍在反映視覺更新。

全新的「部分呈現的影格」功能目的是提供更多符合直覺的呈現方式，雖然部分內容不會在影格中及時呈現，但並非完全封鎖視覺更新。

「效能」面板中呈現局部的影格

Chromium 問題：1261130

其他精選內容

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

  • 更新模擬裝置的 iPhone 使用者代理程式字串。所有 iPhone 5 之後的版本都會有 iPhone OS 13_2_3 的使用者代理程式字串。(1289553)。
  • 您現在可以直接將程式碼片段儲存為 JavaScript 檔案。先前您需要手動附加 .js 副檔名。(1137218)。
  • 現在使用來源對應進行偵錯時，「Sources」面板現在會正確顯示範圍變數名稱。過去，即使提供了來源對應，「Sources」面板仍會顯示縮小的範圍變數名稱。(1294682)。
  • 「來源」面板現在可以在載入網頁時正確還原捲動位置。先前位置未正確還原，導致偵錯作業造成不便。(1294422)。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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