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

Jecelyn Yeen

記錄器：步驟的複製方式選項、頁內重播、步驟的內容選單

在「記錄器」中開啟現有使用者流程。先前重播使用者流程時，開發人員工具一律會先瀏覽或重新載入網頁，再開始重播。

在最新更新中，「記錄器」會分開顯示導覽步驟。你可以按一下滑鼠右鍵並移除，即可在頁面中重播！

此外，您也可以在「記錄器」面板中，對步驟按一下滑鼠右鍵並複製到剪貼簿，不必匯出整個使用者流程。這項功能也適用於擴充功能。舉例來說，您可以嘗試將步驟複製為 Nightwatch 測試指令碼。這項功能可讓您輕鬆更新現有指令碼。

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

Chromium 問題：1322313、1351649、1322313、1339767

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

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

在這個範例中，系統會在製作期間縮減來源檔案。舉例來說，在本示範中，sayHi 函式會縮減為 n，takeABreak 函式則會縮減為 o。

先前在「Performance」面板中記錄追蹤記錄時，追蹤記錄只會顯示縮寫的函式名稱。這使得偵錯作業更加困難。

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

Chromium 問題：1364601、1364601

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

您可以使用下列快速鍵，在「來源」面板中切換分頁： 在 macOS 上，按下 Function + Command + 向上鍵和向下鍵 在 Windows 和 Linux 上，按下 Control + Page Up 或 Page Down

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

此外，開發人員工具現在只會在行尾接受向右箭頭，以自動完成。舉例來說，當您在程式碼中間編輯內容時，系統會顯示自動完成對話方塊。按下向右鍵時，您可能想將游標設為下一個位置，而不是自動完成。這項使用者體驗異動可更符合您的撰寫工作流程。

Chromium 問題：1167965、1172535、1371585。1369503

改善 JavaScript 偵錯功能

本次更新的 JavaScript 偵錯功能包含以下改善項目：

• new.target 是一種中繼屬性，可讓您偵測函式或建構函式是否使用 new 運算子呼叫。您現在可以在 Console 中記錄 new.target，以便在偵錯期間檢查其值。先前輸入 new.target 時，系統會傳回錯誤訊息。
• WeakRef 物件可讓您保留對其他物件的弱參照，同時不會阻止該物件遭到垃圾收集。開發人員工具現在會顯示值的內嵌預覽畫面，並在偵錯期間直接在控制台中評估弱參照。先前，您必須明確呼叫「deref」才能解決問題。
• 修正陰影變數的固定內嵌預覽畫面。先前顯示的值有誤。
• 在「來源」面板的「範圍」窗格中，取消混淆 Generator 和 async 函式中的變數名稱。

Chromium 問題：1267690、1246863、1371322、1311637

其他重點

這個版本的重要修正項目包括：

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

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

目前的「中斷點」窗格在監控所有中斷點時，提供的視覺輔助效果有限。此外，常用動作會隱藏在內容選單中。

這項實驗性使用者體驗改版為「中斷點」窗格帶來結構，開發人員可快速存取常用功能，例如編輯及移除中斷點。

以下列舉幾項重點：

• 這兩個暫停選項都位於「中斷點」窗格中。選項附有明確的文字標籤，可讓使用者一目瞭然。
• 中斷點會依檔案分組，並依行號或欄號排序。你可以收合及展開這些區塊。**
• 將游標懸停在「中斷點」窗格中的中斷點或檔案名稱上時，會顯示移除和編輯中斷點的新選項。

如要查看完整異動內容，請參閱我們的 RFC (已關閉)，並在這裡提供意見回饋。

Chromium 問題：1346231、1324904

[實驗功能] 自動對壓縮過的來源套用美化排版

「來源」面板現在會自動對壓縮過的來源檔案套用美化排版。如要取消，請按一下「美觀列印」按鈕 { }。

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

Chromium 問題：1164184

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先版管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見或要求新功能，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。