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

Kayce Basques

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

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

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

主控台中的即時運算式

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

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

    即時表情符號 UI

    圖 1. 即時表情符號 UI

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

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

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

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

    已儲存的有效運算式。

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

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

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

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

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

圖 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 輸入條件式中斷點運算式，加快輸入速度。

自動完成 UI

圖 7. Autocomplete UI

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

在 AudioContext 事件中中斷

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

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

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

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

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

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

  • 偵測及附加子程序。
  • 必須在模組前放置中斷點。
  • 在開發人員工具 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;

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

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

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

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

下載預覽頻道

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

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

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

開發人員工具新功能

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