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

Jecelyn Yeen

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

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

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

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

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

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

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

Chromium 問題：1300839、1322879、1299701、1323688

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 行中加入中斷點，然後執行程式碼。內嵌預覽會正確顯示 a 和 x 值。偵錯工具先前不會在內嵌預覽中顯示 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 問題：1319828、1318635、1305475

下載預覽頻道

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

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

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

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

開發人員工具新功能

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