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

Jecelyn Yeen

重新載入時清除效能面板

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

先前「成效」面板會以時間軸形式顯示先前錄製內容的螢幕截圖。這使得難以確定實際評估的開始時間。面板現在一律會先前往 about:blank 頁面，確保記錄會從空白追蹤記錄開始。這與「成效洞察」面板也一致。

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

Chromium 問題：1101268、1382044

錄音工具更新

在錄音工具中查看並醒目顯示使用者流程的程式碼

錄音工具現在提供分割程式碼檢視畫面，可讓你輕鬆查看使用者流程程式碼。如要存取程式碼檢視畫面，請開啟使用者流程並按一下「Show Code」。

只要將遊標懸停在左側每個步驟，錄音工具就會醒目顯示對應的程式碼，方便您追蹤流程。您可以使用下拉式選單變更程式碼格式，這可讓您切換格式，例如「Nightwatch Test」指令碼。

錄音工具中的程式碼檢視模式。

Chromium 問題：1385489

自訂錄製內容的選取器類型

你可以建立只擷取重要選取器類型的錄製內容。建立新記錄時，藉由新選項來自訂選取器類型，您可以加入或排除 XPath 等選取器，確保只擷取您想要的使用者流程中的選取器。

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

Chromium 問題：1384431

在記錄時編輯使用者流程

錄音工具現在支援在錄製期間編輯影片，你可以靈活地即時進行變更。不必結束錄影也能加以調整。

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

Chromium 問題：1381971

自動修飾

「來源」面板現在會自動為原先的壓縮來源檔案套用美化排版。按一下「漂亮列印」按鈕 { } 即可復原。

根據預設，「來源」面板預設會顯示壓縮的內容。如要設定內容格式，您必須手動點選美化列印按鈕。更棒的是，美化版內容並沒有出現在同一個分頁，而是另一個 ::formatted 分頁。

在自動就地列印前後顯示壓縮的檔案。

Chromium 問題：1383453、1382752、1382397

改善 Vue、SCSS 和其他產品的語法醒目顯示功能和內嵌預覽

「來源」面板針對幾種廣泛使用的檔案格式改善了語法的醒目顯示功能，讓您可以更輕鬆地閱讀程式碼及識別其結構，包括 Vue、JSX、Dart、LESS、SCSS、SASS 和內嵌 CSS。

Vue 的語法醒目顯示功能

此外，開發人員工具也改善了 Vue、內嵌 HTML 和 TSX 的內嵌預覽功能。將滑鼠遊標懸停在變數上，即可預覽變數值。

Vue 的內嵌預覽。

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

SASS 的來源對應連結。

Chromium 問題：1385374、1385632、1385281、1385269、1383892、1361862、1383451、{14671392}

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

開發人員工具會實作下列變更，改善自動完成功能：

  • Tab 一律會用於自動完成建議。
  • Arrow right 和 Enter 的行為因情境而異。
  • 在「Console」、「Sources」和「Elements」面板中，文字編輯器的自動完成體驗會保持一致

舉例來說，在「Console」中輸入 cons 時，會發生以下情況：

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

  • 按下 Enter 時，控制台就會執行該行。先前，它會根據最佳建議自動完成程式碼行。如要自動完成功能，請按下 Tab 或 Arrow Right 鍵。 按下 Enter 鍵執行程式碼行。

  • 當您使用 Arrow up 和 Arrow down 快速鍵瀏覽建議清單時，Console 會醒目顯示已選取的選項。 在建議導覽期間醒目顯示。

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

  • 在程式碼中間編輯時 (例如游標介於 n 和 s 時)，請使用 Tab 執行自動完成建議、使用 Enter 執行該行，以及使用 Arrow Right 將遊標向前移動。 在程式碼中間進行編輯。

Chromium 問題：1399436、1276960

其他精選內容

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

  • 開發人員工具中的迴歸問題已解決，無法在內嵌指令碼的 debugger 陳述式中停止。(1385374)。
  • 全新的「Console」設定可讓您預設展開或收合 console.trace() 訊息。透過「設定」切換設定 > 偏好設定 >預設展開 console.trace() 訊息。(1139616)。
  • 「來源」面板中的「程式碼片段」窗格支援強化的自動完成功能，與 Console 類似。(772949)。 文字片段中的自動完成功能。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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