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

Kayce Basques

歡迎回來！距離上次更新約 12 週，適用於 Chrome 68。由於我們沒有足夠的新功能或使用者介面變更，因此略過了 Chrome 69，因此沒有必要發布貼文。

Chrome 70 版開發人員工具即將推出的新功能和重大異動包括：

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

控制台中的即時運算式

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

  1. 按一下「Create Live Expression」圖示 建立即時表達意見。系統會隨即開啟即時運算式 UI。

    即時運算式 UI

    圖 1：即時運算式 UI

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

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

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

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

    儲存的 Live Expression。

    圖 3：已儲存的 Live Expression

即時運算式值每 250 毫秒更新一次。

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

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

在控制台中輸入 document.activeElement 後，檢視區中的節點就會醒目顯示。

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

以下列出一些實用的運算式：

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

效能面板最佳化

分析大型網頁時，「效能」面板之前需要數十秒的時間處理及視覺化資料。點選事件即可在「摘要」分頁中瞭解詳情，有時也會中斷幾秒鐘的載入時間。Chrome 70 的處理和顯示圖片速度較快。

正在處理及載入成效資料。

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

更可靠的偵錯功能

Chrome 第 70 版修正了幾個會導致中斷點消失或未觸發的錯誤。

同時修正了與來源地圖相關的錯誤。有些 TypeScript 使用者會指示 DevTools 在逐步執行程式碼時忽略特定的 TypeScript 檔案，反而會改為忽略整套 JavaScript 檔案。這些修正也會解決導致「來源」面板執行速度緩慢的問題。

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

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

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

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

自動完成條件中斷點

透過 Autocomplete UI，更快速地輸入條件中斷點運算式。

Autocomplete UI

圖 7. Autocomplete UI

您知道嗎？Autocomplete UI 是由 CodeMirror 驅動，這個架構也會驅動主控台。

中斷 AudioContext 事件

使用「Event Listener Breakpoints」窗格，暫停 AudioContext 生命週期事件處理常式的第一行。

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

「Event Listener Breakpoints」窗格中的 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;

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

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

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

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

下載預覽管道

考慮使用 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