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

歡迎回來!自上次更新 (適用於 Chrome 68) 以來,已經過了約 12 週。我們跳過 Chrome 69,因為我們沒有足夠的新功能或 UI 變更,無法發布相關文章。

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

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

主控台中的即時運算式

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

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

    即時表情符號 UI

    圖 1. 即時表情符號 UI

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

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

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

  3. 按一下 Live Expression UI 外側,即可儲存運算式。

    已儲存的有效運算式。

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

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

在積極評估期間醒目顯示 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 使用者會在逐步執行程式碼時,指示開發人員工具忽略特定 TypeScript 檔案,而開發人員工具會忽略整個內含的 JavaScript 檔案。這些修正也解決了導致「來源」面板整體執行速度變慢的問題。

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

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

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

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

自動完成條件中斷點

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

自動完成 UI

圖 7. 自動完成 UI

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

在 AudioContext 事件中中斷

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

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

「Event Listener Breakpoints」窗格中的 AudioContext 事件。

圖 8. 「Event Listener Breakpoints」窗格中的 AudioContext 事件

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

ndb 是 Node.js 應用程式專用的全新偵錯工具。除了透過開發人員工具取得的一般偵錯功能之外,adb 還提供以下功能:

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

ndb 使用者介面。

圖 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;

在「效能」錄製檔的「使用者載入時間」專區中,DevTools 會自動標記使用者載入時間測量結果。

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

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

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

下載預覽管道

建議您將 Chrome Canary開發人員版Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能,測試最新的網路平台 API,並在使用者發現問題前,協助您找出網站的問題!

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

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

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。