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

Jecelyn Yeen

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

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

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

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

如要瞭解 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，無障礙窗格會隱藏在「顯示更多」按鈕下方。如果您經常偵錯無障礙功能，現在可以將窗格拖曳到前面，方便存取。

Chromium 問題：1146146

在瀏覽器外挑選顏色

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

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

Chromium 問題：1245191

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

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

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

Chromium 問題：1316340

支援虛擬驗證器的大型 blob

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

這個核取方塊預設為停用。您只能為使用 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 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

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