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

Jecelyn Yeen

在「錄製器」面板中擷取雙擊和右鍵點擊事件

Recorder 面板現在可以擷取雙擊和按右鍵事件。

在這個示範中，請開始錄製並嘗試執行下列步驟：

• 按兩下資訊卡即可放大
• 在資訊卡上按一下滑鼠右鍵，然後從內容選單中選取所需動作

如要瞭解 Recorder 如何擷取這些事件，請展開步驟：

• 雙擊會擷取為 type: doubleClick。
• 右鍵事件會以 type: click 擷取，但 button 屬性設為 secondary。一般滑鼠點擊的 button 值為 primary。

Chromium 問題：1300839、1322879、1299701、1323688

Lighthouse 面板中的新時間範圍和快照模式

您現在可以使用 Lighthouse 評估網站的效能，不限於網頁載入。

Lighthouse 面板現在支援 3 種使用者流程評估模式：

• 導覽報表可分析單一網頁的載入作業。導覽是最常見的報表類型。目前版本之前的所有 Lighthouse 報表都是導覽報表。
• 時間範圍報表可分析任意一段時間，通常包含使用者與網頁互動的時間。
• 快照報表可分析處於特定狀態的網頁，通常是在使用者與網頁互動之後。

舉例來說，我們可以評估在這個示範頁面上將商品加入購物車的成效。選取「時間範圍」模式，然後按一下「開始時間範圍」。捲動並將幾項商品加入購物車。完成後，按一下「End timespan」，即可產生使用者互動的 Lighthouse 報表。

請參閱Lighthouse 中的使用者流程，瞭解各模式的獨特用途、優點和限制。

Chromium 問題：1291284

成效洞察更新

改善「效能深入分析」面板中的縮放控制

開發人員工具現在會根據滑鼠游標而非播放頭位置進行縮放。有了最新的游標縮放功能，您可以將滑鼠移至音軌的任何位置，並立即縮放至所需區域。

請參閱「成效洞察」，瞭解如何透過資訊面板取得可做為行動依據的洞察資料，並改善網站成效。

Chromium 問題：1313382

確認刪除效能記錄

開發人員工具現在會在刪除效能記錄前顯示確認對話方塊。

Chromium 問題：1318087

重新排列「元素」面板中的窗格

您現在可以根據偏好設定，重新排序「元素」面板中的窗格。

舉例來說，如果您在窄螢幕上開啟「DevTools」，「Accessibility」窗格會隱藏在「Show more」按鈕下方。如果您經常偵錯無障礙功能，現在可以將窗格拖曳到前面，方便存取。

Chromium 問題：1146146

在瀏覽器外挑選顏色

開發人員工具現在支援在瀏覽器外選擇顏色。先前只能在瀏覽器中挑選顏色。

在「Styles」窗格中，按一下任一顏色預覽畫面，開啟顏色挑選器。使用滴管從任何位置挑選顏色。

Chromium 問題：1245191

改善偵錯期間的內嵌值預覽功能

偵錯工具現在會正確顯示內嵌值預覽畫面。

在這個範例中，double 函式有輸入參數 a 和變數 x。在 return 行上設定中斷點，然後執行程式碼。內嵌預覽畫面會正確顯示 a 和 x 值。先前，偵錯工具不會在內嵌預覽畫面中顯示 x 值。

Chromium 問題：1316340

支援虛擬驗證器的大型 blob

WebAuthn 分頁現在針對虛擬驗證器新增了「支援大型 blob」核取方塊。

這個核取方塊預設為停用。您只能為支援 Resident Key 的 ctap2 通訊協定驗證工具啟用這項功能。

Chromium 問題：1321803

來源面板中的新鍵盤快速鍵

來源面板現在提供兩個新的鍵盤快速鍵：

• 使用 Control / Command + Shift + Y 鍵切換導覽側欄 (左側)
• 使用 Control / Command + Shift + H 切換偵錯工具側欄 (右側)

Chromium 問題：1226363

改善來源對照圖

先前開發人員在以下情況下會發生隨機失敗：

• 使用 Codepen 範例進行偵錯
• 在 Codepen 範例中找出效能問題的來源位置
• 啟用 React 開發人員工具時，缺少「Component」分頁

以下是一些修復來源圖的修正，可改善整體偵錯體驗：

• 修正內嵌指令碼和來源位置之間的位置和偏移對應
• 為影格文字位置使用備用資訊
• 使用框架的網址，正確解析相對網址

Chromium 問題：1319828、1318635、1305475

下載預覽管道

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

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

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

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具的新功能

這份清單列出「DevTools 最新消息」系列文章中涵蓋的所有內容。