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

Jecelyn Yeen

在「錄音工具」面板擷取內容按兩下，然後在活動上按一下滑鼠右鍵

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

在「錄音工具」面板擷取內容按兩下，然後在活動上按一下滑鼠右鍵

在這個範例中，啟動錄製作業並嘗試執行下列步驟：

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

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

  • 按兩下會擷取為 type: doubleClick。
  • 系統會將右鍵事件擷取為 type: click，但 button 屬性設為 secondary。一般滑鼠點擊的 button 值為 primary。

Chromium 問題：1300839、1322879、1299701、1323688

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

您現在可以使用 Lighthouse 來評估網站在網頁載入後的成效。

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

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

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

舉例來說，現在要評估這個示範頁面將商品加入購物車的成效。選取「時間範圍」模式，然後按一下「開始時間範圍」。捲動畫面，將一些商品加入購物車。完成後，按一下「End 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 分頁現在包含虛擬驗證者專用的 [支援大型 blob] 核取方塊。

這個核取方塊預設為停用。只有具備 ctap2 通訊協定 (支援常駐金鑰) 的驗證器才需要啟用這項功能。

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

Chromium 問題：1321803

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

「Sources」面板現在提供兩個新的鍵盤快速鍵：

  • 使用 Control / Command + Shift + Y 鍵來切換導覽側欄 (左)
  • 使用 Control / Command + Shift + H 鍵切換debugger側欄 (右側)

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

Chromium 問題：1226363

改善來源地圖

在過去，開發人員曾在下列期間遇到隨機錯誤：

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

以下為來源地圖的修正項目，以改善整體的偵錯體驗：

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

Chromium 問題：1319828、1318635、1305475

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59