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

Chrome 100

歡迎使用 Chrome 第 100 版!Chrome 開發人員工具將持續提供可靠的工具,協助開發人員在網路上進行建構。歡迎花點時間瀏覽「新功能」分頁,一同慶祝這些里程碑。

如往常,您可以按一下圖片,觀看最新的開發人員工具新功能影片

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

您現在可以在「Styles」窗格中查看及編輯 CSS @supports 位置規則。這些變更可讓您更輕鬆地即時測試 at-rule。開啟這個示範頁面檢查 <div class=”box”> 元素,查看「Styles」窗格中的 @supports at-rules。按一下規則的宣告即可編輯。

查看及編輯規則中的 @supports

Chromium 問題:12225741222573

改善錄音工具面板

預設支援常見的選取器

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

  • data-testid
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

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

由於 email 元素已定義 data-testid,系統會自動使用該元素做為選取器,而非 idclass 屬性。

預設支援常見的選取器

自訂錄影的選取器

如果您未使用常見選取器,可以自訂錄音檔的選取器。

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

自訂錄影的選取器

自訂選取器選取結果

重新命名錄音檔

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

重新命名錄音檔

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

您現在可以在偵錯期間,將滑鼠游標懸停在「Sources」面板中的類別或函式上,預覽其屬性。先前,這項功能只會顯示函式名稱和原始碼中函式位置的連結。

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

Chromium 問題:1049947

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

效能記錄現在會在「Frames」時間軸中顯示新的影格類別「Partially presented frames」。

先前,Frames 時間軸會將任何有延遲主執行緒工作影格視為「遺漏影格」。不過,在某些情況下,某些影格仍可能會產生由合成器執行緒驅動的視覺更新 (例如捲動)。

這會讓使用者感到困惑,因為這些「遺漏影格」的螢幕截圖仍會顯示視覺更新。

新的「部分顯示影格」旨在更直觀地指出,雖然某些內容未在影格中及時顯示,但問題並未嚴重到完全阻斷視覺更新。

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

Chromium 問題:1261130

其他精選內容

以下是這個版本中值得注意的修正項目:

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

下載預覽管道

建議您將 Chrome Canary開發人員版Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能,測試最新的網路平台 API,並在使用者發現問題前,協助您找出網站的問題!

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。