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

Kayce Basques

歡迎回來！我們上次更新 Chrome 68 版，至今已過了約 12 週。我們略過 Chrome 69，因為沒有足夠的新功能或 UI 變更，因此不值得發布文章。

Chrome 70 版的開發人員工具將推出新功能和重大變更，包括：

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

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

控制台中的即時運算式

如要即時監控 Live Expression 的值，請將其固定在控制台頂端。

1. 按一下「建立即時運算式」 。系統會開啟 Live Expression UI。

   

   圖 1. 即時運算式 UI

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

   

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

3. 按一下「即時運算式」使用者介面以外的區域，即可儲存運算式。

   

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

Live Expression 值每 250 毫秒更新一次。

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

在「控制台」中輸入會評估為 DOM 節點的運算式，現在「即時評估」會在檢視區塊中醒目顯示該節點。

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

圖 7. 自動完成 UI

你知道嗎？自動完成 UI 採用 CodeMirror，這項工具也支援控制台。

在 AudioContext 事件中中斷

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

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、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。