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 時，會發生以下情況：

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

  • 按下 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 影片留言。

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59