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

Jecelyn Yeen

錄製器：將步驟、頁面內重播、步驟的內容選單選項複製

錄音工具面板中的新複製選項。

在錄製器中開啟現有的使用者流程。先前，當您重播使用者流程時，開發人員工具一律會透過前往或重新載入網頁來開始重播。

在最新更新後，錄製器會分別顯示導覽步驟。您可以按一下滑鼠右鍵並移除，即可執行網頁內重播！

除了這個方法之外，您也可以在 *Recorder 面板中按一下步驟，然後將該步驟複製到剪貼簿，而非匯出整個使用者流程。擴充功能也適用於此。舉例來說，請嘗試將步驟複製為 Nightwatch 測試指令碼。有了這項功能，您就能輕鬆更新任何現有指令碼。

先前，您只能透過 3 點按鈕存取步驟選單。你現在可以在步驟的任一處按一下滑鼠右鍵，即可存取選單。

Chromium 問題：1322313、1351649、1322313、1339767

在效能記錄中顯示實際的函式名稱

如果有來源對應圖，現在「Performance」面板會在追蹤記錄中顯示實際的函式名稱及其來源。

在「成效」面板中顯示函式名稱前後比較。

在這個範例中，來源檔案會在正式版期間經過精簡。例如，在這個示範中，sayHi 函式會經過壓縮為 n，takeABreak 函式則會經過壓縮為 o。

顯示經過最小化處理前後的檔案。

先前在「Performance」面板中記錄追蹤記錄時，追蹤記錄只會顯示經過精簡的函式名稱。這會導致偵錯作業更加困難。

在最新的變更中，開發人員工具現在會讀取來源對應，並顯示實際的函式名稱和來源位置。

Chromium 問題：1364601、1364601

控制台與來源面板中的新鍵盤快速鍵

您可以使用以下方式切換「來源」面板中的分頁： 在 macOS 上，按下 Function + Command + 向上鍵和向下鍵 在 Windows 和 Linux 上，按下 Control + 向上鍵或向下鍵

此外，您也可以在 macOS 上使用 Ctrl + N 和 Ctrl + P 鍵瀏覽自動完成建議，類似於 Emacs。舉例來說，您可以在 Console 中輸入 window.，然後使用這些快速鍵進行瀏覽。

此外，DevTools 目前只接受在行尾使用向右箭頭進行自動完成。舉例來說，當您在程式碼中間編輯內容時，系統就會顯示自動完成對話方塊。當您按下「向右鍵」時，最有可能是想將游標設為下一個位置，而不是自動完成。這項使用者體驗變更可與您的撰寫工作流程更為一致。

Chromium 問題：1167965、1172535、1371585。1369503

改善 JavaScript 偵錯功能

以下是本版本中針對 JavaScript 偵錯功能所做的改善：

  • new.target 是元屬性，可讓您偵測是否使用 new 運算子呼叫函式或建構函式。您現在可以在控制台中記錄 new.target，以便在偵錯期間查看其值。先前，輸入 new.target 時會傳回錯誤。顯示 new.target 評估偵錯功能前後的比較結果。
  • WeakRef 物件可讓您保留對其他物件的弱參照，而不阻止該物件遭到垃圾收集。開發人員工具現在會顯示值的內嵌預覽畫面，並在偵錯期間直接在主控台中評估弱參照。先前，您必須明確呼叫「deref」才能解析。 在偵錯期間顯示 WeakRef 評估前後的比較結果。
  • 修正了遮蔽變數的內嵌預覽畫面。先前顯示的值有誤。 顯示遮罩變數比較前後的內嵌預覽畫面。
  • 在「來源」面板的「範圍」窗格中，為 Generator 和 async 函式中的變數名稱解密。

Chromium 問題：1267690、1246863、1371322、1311637

其他精選內容

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

  • 在「Styles」窗格中，支援更多無效 CSS 屬性的提示，包括內嵌高度和寬度、flex 和格線屬性。(1373597、1178508、1178508、1178508)
  • 修正語法醒目顯示功能。自從開發人員工具最近升級程式碼編輯器後，這項功能就無法正常運作。(1290182)
  • 在 Recorder 中，在 onBlur 事件發生後，正確擷取輸入變更事件。(1378488)
  • 更新匯出的 Puppeteer 重播指令碼，以便在錄製器中獲得更優質的偵錯體驗。(1351649)。
  • 支援在錄音工具中錄製及重播，以便進行遠端偵錯。(1185727)。
  • 修正 var() 中特殊 CSS 變數名稱的剖析問題。先前，DevTools 不支援使用 var(--fo\ o) 等轉義字元的變數剖析作業。, (1378992)

[實驗功能] 改善中斷點管理的使用者體驗

目前的「Breakpoints」窗格提供的視覺輔助功能不多，無法有效監控所有中斷點。此外，常用的動作會隱藏在內容選單後方。

這項實驗性的使用者體驗重新設計計畫為「Breakpoints」窗格帶來結構，讓開發人員能快速存取常用的功能，例如編輯及移除中斷點。

以下列舉幾項重點：

  • 這兩個暫停選項都位於「Breakpoints」窗格中。並附有明確的文字標籤，讓選項不言自明。
  • 中斷點會依檔案分組，並依行號或欄號排序。您可以收合或展開這些視窗。**
  • 在「中斷點」窗格中，將滑鼠游標懸停在中斷點或檔案名稱上方時，可移除及編輯中斷點的新選項。

請參閱RFC (已關閉) 中的完整變更內容，並在這裡提供意見回饋。

在重新設計前後顯示「中斷點」窗格。

Chromium 問題：1346231、1324904

[實驗功能] 自動就地美化排版

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

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

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

Chromium 問題：1164184

下載預覽管道

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

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

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

開發人員工具的新功能

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