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

Kayce Basques

歡迎回來！距離上次更新 Chrome 68 至今約 12 週，我們略過了 Chrome 69，因為沒有足夠的新功能或使用者介面變更需要發布許可。

開發人員工具 Chrome 70 版的最新功能與重大異動包括：

請繼續閱讀，或觀看這份文件的影片版本：

控制台中的即時運算式

如要即時監控使用中的值，請將使用中的運算式固定在主控台頂端。

  1. 按一下「Create Live Expression」圖示 建立即時運算式。直播運算式 UI 會隨即開啟。

    即時運算式 UI

    圖 1：即時運算式 UI

  2. 輸入您要監控的運算式。

    在即時運算式 UI 中輸入 Date.now()。

    圖 2：在即時運算式 UI 中輸入 Date.now()

  3. 按一下「Live Expression」使用者介面以外的地方，即可儲存運算式。

    已儲存的有效運算式。

    圖 3：已儲存的有效運算式

有效運算式值每 250 毫秒更新一次。

在 Eager 評估期間醒目顯示 DOM 節點

在控制台中輸入可評估 DOM 節點的運算式，「Eager Evaluation」現在會在可視區域醒目顯示該節點。

在控制台中輸入 document.activeElement 後，系統就會在可視區域中醒目顯示節點。

圖 4 由於目前運算式評估為節點，因此該節點會在可視區域醒目顯示

以下是幾個實用的運算式：

  • document.activeElement：醒目顯示目前聚焦的節點。
  • document.querySelector(s)：用於醒目顯示任意節點，其中 s 是 CSS 選取器。這相當於將滑鼠遊標懸停在「DOM 樹狀結構」中的節點上。
  • $0，用於醒目顯示目前在 DOM 樹狀結構中選取的節點。
  • $0.parentElement，藉此醒目顯示目前所選節點的父項。

效能面板最佳化

分析大型頁面時，效能面板之前需要數十秒來處理並呈現資料。按一下事件即可在「Summary」(摘要) 分頁中進一步瞭解該事件，有時也會等待數秒載入。在 Chrome 70 中，處理及視覺化呈現速度更快。

處理和載入成效資料。

圖 5：處理和載入成效資料

更可靠的偵錯方式

Chrome 70 修正了一些會導致中斷點消失或無法觸發的錯誤。

並修正與來源對應相關的錯誤。部分 TypeScript 使用者會指示 DevTools 在逐步執行程式碼時忽略特定 TypeScript 檔案，而開發人員工具會略過整個封裝的 JavaScript 檔案。這些修正也解決了導致「來源」面板整體執行速度緩慢的問題。

透過指令選單啟用網路節流功能

你現在可以透過指令選單將網路節流功能設為高速 3G 或慢速 3G。

命令選單中的網路節流指令。

圖 6：命令選單中的網路節流指令

自動完成條件中斷點

使用 Autocomplete UI 快速輸入條件中斷點運算式。

Autocomplete UI

圖 7. Autocomplete UI

你知道嗎？有了 CodeMirror，控制台也會驅動主控台，因此可以使用 Autocomplete UI。

AudioContext 事件中斷

使用「事件監聽器中斷點」窗格，在 AudioContext 生命週期事件處理常式的第一行暫停。

AudioContext 是 Web Audio API 的一部分，可用於處理及合成音訊。

事件監聽器中斷點窗格中的 AudioContext 事件。

圖 8. 事件監聽器中斷點窗格中的 AudioContext 事件

使用 ndb 對 Node.js 應用程式進行偵錯

ndb 是適用於 Node.js 應用程式的全新偵錯工具。除了透過開發人員工具取得的常用偵錯功能之外，ndb 還提供：

  • 偵測並附加至子項程序。
  • 在需要模組之前放置中斷點。
  • 在開發人員工具使用者介面編輯檔案。
  • 根據預設，系統會忽略目前工作目錄以外的所有指令碼。

ndb UI。

圖 9. ndb UI

如要瞭解詳情，請參閱 ndb 的 README 檔案。

額外提示：運用 User Timing API 評估實際使用者互動的情況

想要評估實際使用者完成網頁上的重要歷程需要多久嗎？請考慮使用 User Timing API 檢測程式碼。

舉例來說，假設您想要評估使用者點選行動號召按鈕前，停留在首頁的時間。首先，請在與網頁載入事件相關聯的事件處理常式 (例如 DOMContentLoaded) 中，標示歷程的開頭：

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

然後，您可以標示旅程終點，並在使用者點選按鈕時計算旅程持續時間：

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

您還可以擷取測量結果，以便將其傳送到分析服務，以收集匿名的匯總資料：

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

開發人員工具會在「效能記錄」的「User Timing」部分中自動標記使用者載入時間測量結果。

「使用者載入時間」部分。

圖 10. 「使用者載入時間」部分

在對程式碼偵錯或進行最佳化時，這個做法也相當實用。舉例來說，如果您想要最佳化生命週期的特定階段，請在生命週期函式的開頭和結束時呼叫 window.performance.mark()。React 在開發模式下執行這項操作。

下載預覽頻道

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

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

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

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

開發人員工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google 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