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

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

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

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

控制台中的即時運算式

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

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

    即時運算式 UI

    圖 1. 即時運算式 UI

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

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

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

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

    已儲存的有效運算式。

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

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

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

在 Console 中輸入可評估為 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. 命令選單中的網路節流指令

自動完成條件中斷點

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

Autocomplete UI

圖 7. Autocomplete UI

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

AudioContext 事件中斷

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

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

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

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

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

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

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

ndb UI。

圖 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 CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

請使用下列選項,討論貼文中的新功能和異動,或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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