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

Jecelyn Yeen

錄音工具：複製做為步驟、頁面重播、步驟內容選單的選項

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

在「Recorder」中開啟現有使用者流程。先前當您重播使用者流程時，開發人員工具一律會在前往或重新載入頁面時啟動重播。

取得最新更新後，錄音工具會個別顯示導覽步驟。按一下滑鼠右鍵然後移除，即可執行網頁內重播！

除此之外，在步驟上按一下滑鼠右鍵，然後複製到「*Recorder」面板中的剪貼簿，不必匯出整個使用者流程。也可以搭配擴充功能使用。例如，嘗試將步驟複製為 Nightwatch Test 指令碼。您可以透過這項功能，輕鬆更新任何現有指令碼。

以往，您只能透過三點按鈕存取步驟選單。只要在步驟的任一處按一下滑鼠右鍵，即可存取選單。

Chromium 問題：1322313、1351649、1322313、1339767

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

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

在「效能」面板中顯示函式名稱的比較前後結果。

在本範例中，來源檔案在實際工作環境期間會經過壓縮。舉例來說，sayHi 函式經過壓縮為 n，而在本示範中，takeABreak 函式會壓縮為 o。

顯示最小化前後的檔案。

以往您在「效能」面板中錄製追蹤記錄時，追蹤記錄只會顯示經過壓縮的函式名稱。因此較難偵錯。

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

Chromium 問題：1364601、1364601

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

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

此外，在 MacOS 上，你也可以按下 Ctrl + N 鍵、Ctrl + P 鍵 (與 Emacs 類似) 來瀏覽自動完成建議。例如，您可以在 Console 中輸入 window.，然後使用這些快速鍵進行瀏覽。

除此之外，開發人員工具現在接受使用「向右箭頭」執行自動完成建議作業。舉例來說，當您在程式碼中間進行編輯時，系統會顯示自動完成對話方塊。按下向右鍵時，你很可能希望將遊標設為下一個位置，而非自動完成功能。這項使用者體驗變更更適合您的編寫工作流程。

Chromium 問題：1167965、1172535、1371585。1369503

改善 JavaScript 偵錯功能

這個版本列舉了一些 JavaScript 偵錯改善項目：

  • new.target 是一種中繼屬性，可讓您偵測使用新運算子呼叫的函式或建構函式。您現在可以在主控台中記錄 new.target，在偵錯期間檢查其值。先前當您輸入 new.target 時，系統會傳回錯誤。顯示新的.target 評估偵錯偵錯前後的比較結果。
  • WeakRef 物件可讓您保留對其他物件的有限參照，而不會防止該物件受到垃圾收集。開發人員工具現在會顯示該值的內嵌預覽畫面，並在偵錯期間直接在控制台中評估弱參照。先前，您需要明確呼叫「deref」來解決這個問題。 在偵錯期間顯示 WeakRef 評估前後的比較。
  • 已修正遭覆蓋變數的內嵌預覽。先前顯示的值不正確。 針對陰影變數顯示前後對照內嵌預覽畫面。
  • 在「Sources」面板的「Scope」窗格中，將 Generator 和 async 函式中的變數名稱去模糊化。

Chromium 問題：1267690、1246863 1371322、1311637

其他精選內容

這個版本的幾個重點修正如下：

  • 「Styles」窗格中支援更多閒置 CSS 屬性的提示，內嵌高度和寬度、彈性和格線屬性。(1373597、1178508、1178508、1178508)
  • 修正語法醒目顯示功能。自開發人員工具近期的程式碼編輯器升級後，這個版本無法正常運作。(1290182)。
  • 在錄音工具中，正確擷取模糊處理事件後的輸入變更事件。(1378488)。
  • 更新匯出時 Puppeteer 重播指令碼，讓錄音工具的偵錯體驗更臻完善。(1351649)。
  • 在 Recorder 中支援記錄和重播功能，以便進行遠端偵錯。(1185727)。
  • 已修正 var() 中的特殊 CSS 變數名稱剖析問題。開發人員工具先前不支援剖析含有逸出字元 (例如 var(--fo\ o)) 的變數。、(1378992)

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

目前的「Breakpoints」窗格都能提供視覺輔助，方便您監控所有中斷點。此外，內容選單還隱藏了常用的動作。

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

以下列舉幾項重點功能：

  • 這兩個暫停選項都位於「Breakpoints」窗格中。而且包含明確的文字標籤，讓使用者能夠明確瞭解這些選項。
  • 中斷點是按照檔案分組，並依照行或欄編號排序。您可以收合或展開這些視窗**。
  • 將遊標懸停在中斷點或「Breakpoint」窗格中的檔案名稱上，即可移除和編輯中斷點。

請參閱 RFC (已關閉) 中的完整變更內容；如要提供意見，請按這裡。

顯示重新設計前後的「Breakpoint」窗格。

Chromium 問題：1346231、1324904

[實驗功能] 自動就地列印美化

「Sources」面板現在會自動進行美化處理過的來源檔案，按一下「美化排版」按鈕 { } 即可復原。

先前「來源」面板會預設顯示縮小的內容。您必須手動點選美化版按鈕，才能將內容格式化。更重要的是，美化列印的內容未顯示在同一個檔案，而是出現在另一個 ::formatted 分頁中。

在自動就地列印的美化排版前後顯示縮小的檔案。

Chromium 問題：1164184

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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