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

Jecelyn Yeen

Chrome 100

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

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

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

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

查看及編輯規則中的 @supports

Chromium 問題：1222574、1222573

改善錄音工具面板

預設支援常見的選取器

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

  • 資料測試 ID
  • data-test
  • data-qa
  • data-cy
  • data-test-id
  • data-qa-id
  • data-testing

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

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

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

預設支援常見的選取器

自訂錄影的選取器

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

舉例來說，這個示範頁面使用 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)。
  • 「來源」面板現在可以在載入網頁時正確還原捲動位置。先前，系統無法正確還原位置，導致偵錯作業不便。(1294422)。

下載預覽頻道

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

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

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

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。