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

Chrome 指南

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

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

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

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

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

Chromium 問題:12225741222573

改良錄音工具面板

預設支援常用選取器

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

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

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

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

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

預設支援常用選取器

自訂錄製內容的選取器

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

舉例來說,這個示範頁面會使用 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 CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

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

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

開發人員工具新功能

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