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

Jecelyn Yeen

重新載入時清除「效能」面板

現在點選「Start profiling and reload page」(開始分析並重新載入頁面) 按鈕後，「Performance」(效能) 面板會清除螢幕截圖和追蹤記錄。

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

Chromium 問題：1101268、1382044

錄音工具更新

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

「記錄器」現在提供程式碼分割檢視畫面，方便您查看使用者流程程式碼。如要存取程式碼檢視畫面，請開啟使用者流程並點選「顯示程式碼」。

當您將游標懸停在左側的每個步驟上時，「記錄器」會醒目顯示對應的程式碼，方便您追蹤流程。你可以使用下拉式選單變更程式碼格式，在 Nightwatch 測試指令碼等格式之間切換。

Chromium 問題：1385489

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

您可以建立錄製內容，只擷取對您重要的選取器類型。建立新記錄時，您可以使用新選項自訂選取器類型，例如納入或排除 XPath 等選取器，確保只擷取使用者流程中所需的選取器。

Chromium 問題：1384431

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

錄音工具現在支援在錄音期間編輯，方便你即時進行變更。現在不必結束錄製，即可進行調整。

Chromium 問題：1381971

自動對壓縮過的來源套用美化排版

「來源」面板現在會自動對壓縮過的來源檔案套用美化排版。如要取消美化排版，請按一下「美化排版」按鈕 { }。

先前「來源」面板預設會顯示縮小內容。如要設定內容格式，您必須手動點選「pretty print」按鈕。此外，美觀列印的內容並未顯示在同一個分頁中，而是顯示在另一個 ::formatted 分頁中。

Chromium 問題：1383453、1382752、1382397

更完善的語法醒目顯示和內嵌預覽功能，適用於 Vue、SCSS 等語言

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

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

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

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

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

開發人員工具實作下列變更，提升自動完成體驗：

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

舉例來說，在控制台中輸入 cons 時，會發生以下情況：

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

• 按下 Enter 時，控制台會執行該行程式碼。先前系統會自動完成該行，並填入最熱門的建議。如要自動完成，請按 Tab 或 Arrow Right。

• 使用 Arrow up 和 Arrow down 快速鍵瀏覽建議清單時，控制台會醒目顯示所選選項。

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

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

Chromium 問題：1399436、1276960

其他亮點

這個版本的重要修正項目包括：

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

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。