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

Kayce Basques

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

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

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

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

控制台中的即時運算式

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

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

   

   圖 1. 即時運算式 UI

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

   

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

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

   

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

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

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

在 Console 中輸入可評估為 DOM 節點的運算式，並接著輸入 Eager Evaluation 醒目顯示檢視區中的該節點

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

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

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

效能面板最佳化

剖析大型頁面時，效能面板之前需要數十秒才能完成處理， 以視覺化方式呈現資料使用者有時只要按一下事件，就能在「摘要」分頁中進一步瞭解相關資訊 但載入時間卻長達數秒在 Chrome 70 中，處理及視覺化呈現速度更快。

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

更可靠的偵錯方式

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

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

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

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

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

自動完成條件中斷點

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

圖 7. Autocomplete UI

你知道嗎？有了 CodeMirror，系統就能支援 Autocomplete UI，這個程式碼也支援 控制台。

AudioContext 事件中斷

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

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

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

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

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

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

圖 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');
});

您也可以擷取評估結果，以便輕鬆傳送到 Analytics 服務 收集匿名的匯總資料：

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 影片留言。

開發人員工具新功能

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