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

Jecelyn Yeen

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

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

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

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

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

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

Chromium 問題：1322313、1351649、1322313、1339767

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

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

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

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

在挖掘前後顯示檔案。

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

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

Chromium 問題：1364601、1364601

控制台推出新鍵盤快速鍵，來源面板

在「來源」面板中，您可以使用下列方式切換分頁： 在 MacOS 中，函式 + 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 時會傳回錯誤。 顯示 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 影片留言。

開發人員工具新功能

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