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

Kayce Basques

歡迎回來！距離上次更新 Chrome 68 至今約 12 週，我們跳過 Chrome 69，因為我們沒有足夠的新功能或 UI 變更，無法發布相關文章。

Chrome 70 中開發人員工具的新功能和重大變更包括：

• 控制台中的即時運算式。
• 在積極評估期間醒目顯示 DOM 節點。
• 效能面板最佳化。
• 更可靠的偵錯功能。
• 透過指令選單啟用網路節流設定。
• 自動完成條件式中斷點。
• 中斷 AudioContext 事件。
• 使用 ndb 對 Node.js 應用程式進行偵錯。
• 額外提示：使用 User Timing API 評估實際使用者互動情形。

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

主控台中的即時運算式

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

1. 按一下「建立直播表情符號」圖示 。直播運算式 UI 會隨即開啟。

   

   圖 1. 即時表情符號 UI

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

   

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

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

   

   圖 3. 已儲存的即時運算式

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

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

在主控台中輸入可評估為 DOM 節點的運算式，積極評估現在會在檢視區中醒目顯示該節點。

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

以下列出一些實用語句：

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

效能面板最佳化

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

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

更可靠的偵錯功能

Chrome 70 修正了導致中斷點消失或未觸發的部分錯誤。

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

透過指令選單啟用網路節流設定

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

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

自動完成條件中斷點

使用自動完成 UI 輸入條件式中斷點運算式，加快輸入速度。

圖 7. Autocomplete UI

你知道嗎？自動完成 UI 是透過 CodeMirror 實現，後者也為控制台提供動力。

在 AudioContext 事件中中斷

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

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

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

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

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

• 偵測及附加子程序。
• 必須在模組前放置中斷點。
• 在開發人員工具 UI 中編輯檔案。
• 根據預設，會忽略目前工作目錄以外的所有指令碼。

圖 9. ndb UI

詳情請參閱 ndb 的 README。

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

想評估實際使用者完成網頁上重要歷程所需的時間嗎？建議使用 User Timing API 檢測程式碼。

舉例來說，假設您想評估使用者在點按行動號召 (CTA) 按鈕前，在首頁停留的時間長度。首先，請在與網頁載入事件相關聯的事件處理常式 (例如 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、Dev 或 Beta 版做為預設的開發瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項來討論最新功能、更新，或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「更多選項」>「說明」>「回報開發人員工具的問題」，然後使用 more_vert 回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具新功能

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