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

Jecelyn Yeen

重新載入時清除效能面板

點選「Start profiling and reload page」按鈕後，Performance面板現在會一併清除螢幕截圖和追蹤記錄。

先前「Performance」面板會顯示時間軸，並附上先前錄製內容的螢幕截圖。因此，很難判斷實際的測量時間。面板現在一律會先前往 about:blank 頁面，確保記錄一開始時是空白追蹤記錄。這項做法與「效能深入分析」面板一致，該面板已採用相同做法。

重新載入時清除效能面板。

Chromium 問題：1101268、1382044

錄音工具更新

在錄製器中查看並醒目顯示使用者流程的程式碼

錄音工具現在提供分割程式碼檢視畫面，方便您查看使用者流程程式碼。如要存取程式碼檢視畫面，請開啟使用者流程，然後按一下「顯示程式碼」。

當您將滑鼠游標懸停在左側的每個步驟上時，錄製器會醒目顯示對應的程式碼，方便您追蹤流程。您可以使用下拉式選單變更程式碼格式，藉此切換格式，例如 Nightwatch Test 指令碼。

Recorder 中的程式碼檢視畫面。

Chromium 問題：1385489

自訂錄影檔的選取器類型

您可以建立錄製工作，只擷取您需要的選取器類型。您可以在建立新錄製時使用新的自訂選取器類型選項，加入或排除 XPath 等選取器，確保只擷取使用者流程中所需的選取器。

新增自訂選取器類型的選項。

Chromium 問題：1384431

在錄製期間編輯使用者流程

錄音工具現在可在錄音期間進行編輯，讓你即時進行變更。你不再需要結束錄製才能調整內容。

在錄製使用者流程期間編輯。

Chromium 問題：1381971

自動就地美化排版

「Sources」面板現在會自動針對壓縮過的來源檔案套用美化排版。您可以按一下「美化排版」按鈕 { } 來取消。

先前「Sources」面板預設會顯示經過精簡的內容。如要設定內容格式，您必須手動點選「美化列印」按鈕。此外，美化後的內容並未顯示在同一個分頁中，而是顯示在另一個 ::formatted 分頁中。

在自動就地美化排版前後，顯示經過壓縮的檔案。

Chromium 問題：1383453、1382752、1382397

針對 Vue、SCSS 等提供更完善的語法醒目顯示和內嵌預覽功能

「Sources」面板強化了幾種廣泛使用的檔案格式的語法醒目顯示功能，讓您更輕鬆地閱讀程式碼並辨識其結構，包括 Vue、JSX、Dart、LESS、SCSS、SASS 和內嵌 CSS。

Vue 中的語法醒目顯示。

此外，DevTools 也改善了 Vue、內嵌 HTML 和 TSX 的內嵌預覽功能。將滑鼠游標懸停在變數上，即可預覽其值。

Vue 的內嵌預覽。

除此之外，開發人員工具現在會在「Sources」面板中顯示樣式表的來源對應。舉例來說，開啟 SCSS 檔案時，只要按一下來源地圖連結，即可存取相關的 CSS 檔案。

SASS 的來源對應連結。

Chromium 問題：1385374、1385632、1385281、1385269、1383892、1361862、1383451、1392106、1149734

在控制台提供符合人體工學且一致的自動完成功能

開發人員工具透過實作下列變更，改善自動完成功能的使用體驗：

  • Tab 一律用於自動完成。
  • Arrow right 和 Enter 的行為會因情境而異。
  • 在 主控台、來源和元素面板中，自動完成功能的體驗在各文字編輯器中皆一致

舉例來說，如果您在控制台中輸入 cons，系統會產生以下結果：

  • 控制台會顯示自動完成建議清單，並在頂端選項周圍加上細微的點狀邊框，表示導覽尚未開始。 頂端自動完成選項周圍的虛線邊框。

  • 按下 Enter 時，主控台會執行該行。先前系統會自動使用首要建議填入一行。如要自動完成，請按下 Tab 或 Arrow Right。按下 Enter 時執行該行。

  • 當您使用 Arrow up 和 Arrow down 快捷鍵瀏覽建議清單時，控制台會醒目顯示所選選項。 在建議導覽期間顯示醒目效果。

  • 如要在導覽期間自動完成所選選項，請使用鍵盤鍵 Tab、Enter 或 Arrow Right。在導覽期間自動完成所選選項。

  • 在程式碼中間編輯時，例如游標位於 n 和 s 之間，請使用 Tab 進行自動完成，Enter 執行該行，Arrow Right 則可將游標向前移動。 在程式碼中間編輯。

Chromium 問題：1399436、1276960

其他精選內容

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

  • 已解決開發人員工具中的迴歸問題，該問題會導致開發人員工具無法在內嵌指令碼中的 debugger 陳述式停止。(1385374)。
  • 新的 控制台設定，可讓您根據預設展開或摺疊 console.trace() 訊息。依序點選「設定」 >「偏好設定」 >「預設展開 console.trace() 訊息」，即可切換設定。(1139616)
  • 「Sources」面板中的「Snippets」窗格支援強化的自動完成功能，類似於「Console」。(772949) 在程式碼片段中使用自動完成功能。

下載預覽管道

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

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

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

開發人員工具的新功能

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