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

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

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

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

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

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

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

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

Chromium 問題:1300839132287912997011323688

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

您現在可以使用 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 行上設定中斷點,然後執行程式碼。內嵌預覽畫面會正確顯示 ax 值。先前,偵錯工具不會在內嵌預覽畫面中顯示 x 值。

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

Chromium 問題:1316340

支援虛擬驗證器的大型 blob

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

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

 支援虛擬驗證器的大型 blob

Chromium 問題:1321803

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

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

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

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

Chromium 問題:1226363

改善來源對照圖

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

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

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

Chromium 問題:131982813186351305475

下載預覽管道

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

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。