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

在「錄音工具」面板中擷取按兩下事件資料,並按一下滑鼠右鍵即可擷取事件

「錄音工具」面板現在可以擷取按兩下和滑鼠右鍵的事件。

在「錄音工具」面板中擷取按兩下事件資料,並按一下滑鼠右鍵即可擷取事件

在這個例子中,開始錄製,然後嘗試執行下列步驟:

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

如要瞭解錄音工具如何擷取這些事件,請展開下列步驟:

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

Chromium 問題:1300839132287912997011323688

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

您現在可以使用 Lighthouse 評估網站載入速度以外的成效,

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

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

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

舉例來說,假設是透過這個示範頁面評估將商品加入購物車的成效。選取「Timespan」(時間範圍) 模式,然後按一下「Start timespan」(開始時間)。捲動畫面並將一些商品加入購物車。完成後,請按一下「結束時間」,產生使用者互動的 Lighthouse 報表。

時間範圍模式

如要瞭解各種模式的獨特用途、優點和限制,請參閱「Lighthouse 中的使用者流程」。

Chromium 問題:1291284

成效深入分析最新消息

改善成效洞察面板的縮放控制項

開發人員工具現在會根據滑鼠遊標而非播放頭位置來放大畫面。有了最新的遊標導向縮放功能,你就可以將滑鼠移到音軌中的任何位置,並立即放大到所需區域。

查看成效深入分析,瞭解如何透過面板取得可做為行動依據的洞察資料,並改善網站成效。

Chromium 問題:1313382

確認刪除成效記錄

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

確認刪除成效記錄

Chromium 問題:1318087

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

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

舉例來說,如果在小螢幕上開啟開發人員工具,「無障礙設定」窗格就會隱藏在「顯示更多」按鈕下方。如果您經常針對無障礙功能問題進行偵錯,現在可以將窗格拖曳到前端,方便日後存取。

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

Chromium 問題:1146146

在瀏覽器外選擇顏色

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

在「Styles」窗格中,點選任一顏色預覽畫面,即可開啟顏色挑選器。你可以使用滴管從任何位置挑選顏色。

在瀏覽器外選擇顏色

Chromium 問題:1245191

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

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

在這個範例中,double 函式包含輸入參數 a 和變數 x。在 return 行中加入中斷點,然後執行程式碼。內嵌預覽會正確顯示 ax 值。偵錯工具先前不會在內嵌預覽中顯示 x 值。

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

Chromium 問題:1316340

支援用於虛擬驗證器的大型 blob

「WebAuthn」WebAuthn分頁現在新增適用於虛擬驗證器的「Supports Large blob」核取方塊。

這個核取方塊預設為停用。您只能為使用 ctap2 通訊協定,且支援常駐金鑰的驗證者啟用這項功能。

 支援用於虛擬驗證器的大型 blob

Chromium 問題:1321803

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

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

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

「來源」面板的新鍵盤快速鍵

Chromium 問題:1226363

來源對應改善項目

先前,開發人員遇到以下情形時,會隨機發生錯誤:

  • 使用 Codepen 範例進行偵錯
  • Codepen 範例中找出效能問題的來源位置
  • 啟用 React DevTools 時,缺少「元件」分頁

以下為對來源對應修正的幾項修正,以改善整體偵錯體驗:

  • 為內嵌指令碼和來源位置正確對應位置與偏移
  • 使用備用資訊做為頁框的文字位置
  • 使用頁框網址正確解析相對網址

Chromium 問題:131982813186351305475

下載預覽頻道

建議您使用 Chrome CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

請使用下列選項,討論貼文中的新功能和異動,或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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