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

Jecelyn Yeen
Jecelyn Yeen

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

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

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

在近期更新的情況下，錄音工具會分別顯示導航步驟。如要再次執行網頁內重播，請按一下滑鼠右鍵移除範本！

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

之前，您只能透過 3 點按鈕存取步驟選單。現在只要在步驟的任何位置按一下滑鼠右鍵，即可存取選單。

Chromium 問題：1322313、1351649、1322313、1339767

在表演錄影內容中顯示實際函式名稱

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

「Performance」(效能) 面板會顯示函式名稱前後的比較。

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

在挖掘前後顯示檔案。

先前您在「效能」面板中記錄追蹤記錄時，追蹤記錄只會顯示經過壓縮的函式名稱。導致偵錯作業更困難。

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

Chromium 問題：1364601、1364601

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

如要切換「Sources」面板中的分頁，請使用以下工具：MacOS 上為 Function + Command + 向下鍵，或按 down 鍵 (在 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 時會傳回錯誤。顯示 new.target 評估偵錯的前後比較。
  • WeakRef 物件可讓您保留對另一個物件的弱參照，而不會阻止該物件進行垃圾收集。開發人員工具現在會顯示這個值的內嵌預覽，並在偵錯期間直接在控制台中評估弱點參照。先前您必須明確呼叫「deref」來解決這個問題。 在偵錯期間顯示 WeakRef 評估前後的比較。
  • 修正覆蓋變數的內嵌預覽。先前顯示值不正確。 針對覆蓋變數顯示前後對照內嵌預覽。
  • 在「來源」面板的「範圍」窗格中，將 Generator 和 async 函式中的變數名稱去模糊化。

Chromium 問題：1267690、1246863 1371322、1311637

其他精選內容

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

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

[實驗功能] 強化了管理中斷點的使用者體驗

目前的「Breakpoints」窗格幾乎沒有視覺輔助，可用來監控所有中斷點。除此之外，內容選單隱藏了常用的動作。

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

以下列出幾項重點功能：

  • 這兩個暫停選項都位於「Breakpoints」窗格中。附有明確文字標籤，讓選項更易於理解。
  • 中斷點會按照檔案分類，並依行號或欄號排序。您可以收合及展開這些畫面。**
  • 將遊標懸停在中斷點或「Breakpoint」窗格中的檔案名稱時，提供移除和編輯中斷點的新選項。

請參閱 RFC (封閉式) 中的完整異動，並按這裡提供意見。

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

Chromium 問題：1346231、1324904

[實驗功能] 自動到場美化排版

「Sources」(來源) 面板現在會自動為指定的壓縮來源檔案進行美化處理。按一下「Flex Print」按鈕 { } 即可復原。

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

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

Chromium 問題：1164184

下載預覽頻道

建議您使用 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