【譯】一文洞察 Chrome DevTools 近半年新增了哪些功能

  • 2019 年 10 月 31 日
  • 筆記

本文首發於政采雲前端團隊部落格:【譯】一文洞察 Chrome DevTools 近半年新增了哪些新功能 https://www.zoo.team/article/chrome-devtools

本文由政采雲前端團隊 @ 子洋同學翻譯

前言

工欲善其事,必先利其器。Chrome Devtools 是前端開發工程師不可或缺的開發工具,最近半年 Chrome 更新了 6 個版本,其中的 5 個版本里 Chrome Devtools 也更新了一些新功能,我們對最近的一些更新做了翻譯整理,下面我們一起來看看近半年有哪些值得關注的新功能。

DevTools(Chrome 74)的新增功能

高亮顯示所有受 CSS 屬性影響的節點

將滑鼠懸停在會影響節點盒子模型的 CSS 屬性上,如 paddingmargin ,會高亮顯示受到這個屬性聲明影響的所有節點。

Audits 面板中的 Lighthouse v4

新增加的 Tap targets are not sized appropriately 可以檢查移動設備上的互動式元素(如按鈕和鏈接)是否設置了合適的尺寸和間隔。

例如:點擊目標的大小是否易於點擊,或者是否距離其他可點擊目標過近,更多:Tap targets are not sized appropriately

PWA 分類使用新的徽章計分系統。

Lighthouse 相關介紹可參考:Lighthouse

新增 WebSocket 二進位消息查看器

查看 WebSocket 二進位消息的內容:

  1. 打開 Network 面板。可參考 Inspect Network Activity 了解 Network 分析的基礎使用。
  1. 點擊 WS, 過濾不是 WebSocket 連接的資源。
  1. 點擊 WebSocket 連接的 Name 查看詳情 。
  1. 點擊 Messages tab。
  1. 點擊其中的一個 Binary Message 查看詳情 。

可以使用底部的下拉菜單將消息轉換為 Base64 或 UTF-8。點擊 複製到剪貼 可以複製二進位消息。

可在 Command Menu 中使用區域螢幕截圖

區域截圖可以捕獲窗口一部分的螢幕截圖。這個功能之前訪問入口非常隱蔽,現在可以從 Command Menu 直接使用區域截圖。

  1. 打開 DevTools,然後按 Control + Shift + P 或 Command + Shift + P(Mac)打開 Command Menu(命令菜單)。
  1. 輸入 area,選擇 Capture area screenshots,然後 Enter。
  2. 將滑鼠拖到要截屏的部分。
  3. 選擇窗口的一部分截圖。

Network 面板中的 Service Worker 過濾器

Network 篩選框中輸入 is:service-worker-initiatedis:service-worker-intercepted 可以查看由 service worker 發起(initiated)或可能被其修改(intercepted)的請求。

Network 日誌過濾的更多資料,可參考 Filter resources。

Performance recordings 里增加長任務標記

long tasks 相關介紹可參考 long tasks。

Performance 面板分析頁面載入性能的示例,可參考 Do less main thread work

Performance Timings 部分增加 First Paint 的標記

現在,Performance recordings 中的 Timings 會標記出 First Paint 的節點。

DevTools(Chrome 75)的新增功能

CSS 函數自動補全有意義的預設值

某些 CSS 屬性(如filter)的值是函數。例如,filter: blur(1px) 給節點增加 1px 模糊。當自動補全,如 filter 的屬性時,DevTools 會自動補全有意義的值,可以很方便的預覽這個值將在節點上進行的更改效果。

老的版本自動補全,DevTools 自動補全屬性為 filter: blur ,在窗口中看不到任何更改。

新的自動補全,DevTools 自動補全屬性為 filter: blur(1px),可以在窗口中看見改變效果。

從 Command Menu 清除網頁數據

按下 Control+ Shift+ P 或 Command+ Shift+ P(Mac)打開 Command Menu,然後運行 Clear Site Data 命令清除頁面相關的所有數據,包括 Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache 以及 Application Cache.

Application > Clear Storage 中已經存在這個功能。Chrome 75 中新增可以從 Command Menu 執行這個命令。

如果不想刪除所有數據,可以從 Application > Clear Storage 選擇刪除哪些數據 。

查看所有 IndexedDB 資料庫

以前 Application > IndexedDB 只允許查看當前域的 IndexedDB 資料庫。如果頁面里有<iframe>,並且這個<iframe> 也使用 IndexedDB,就無法查看對應的資料庫。從 Chrome 75 開始,DevTools 會顯示所有域的 IndexedDB 資料庫。

舊版本中,這個頁面了嵌入一個使用 IndexedDB 的 demo,但是看不到任何資料庫資訊。

新版本中,可以查看這個 demo 的資料庫。

懸停查看資源未壓縮的大小

將滑鼠懸停在 Size 列上可以查看資源未壓縮的大小。

內聯斷點

假設給下面的程式碼添加 程式碼行斷點:

document.querySelector('#dante').addEventListener('click', logWarning);

在此行的開頭,document.querySelector('#dante')調用之前或 addEventListener('click', logWarning) 調用之前添加斷點 。如果全部啟用,則實際上創建了 3 個斷點。之前,Breakpoints 面板無法單獨管理這 3 個斷點。從 Chrome 75 開始,每個內聯斷點在 Breakpoints 面板中都有自己單獨的一行。

舊版本中,Breakpoints 面板中只有 1 行。

新版本中,Breakpoints面板中有 3 行。

DevTools(Chrome 76)的新增功能

根據 CSS 值自動補全屬性名

輸入 CSS 值,根據值找到對應的屬性名稱。

輸入bold 後,自動補全 font-weight: bold

總記憶體實時使用量

Memory 面板實時顯示總記憶體的使用情況。

Memory 面板的底部顯示這個頁面總共使用 43.4 MB 記憶體。209 KB / s 表示總記憶體使用量每秒增加 209 KB。

更多實時跟蹤記憶體介紹,可參考 Performance Monitor

展示 Service Workers 埠號

Service Workers 面板的標題中包含埠號,可以更輕鬆的追蹤正在調試的 Service Worker 。

查看 Background Fetch 和 Background Sync 事件

可以在 Application 面板里,新的 Background Services 可以監視 Background Fetch 和 Background Sync 事件。由於 Background Fetch 和 Background Sync 事件是在 Background 中發生的,如果只在打開 DevTools 時記錄事件,用處不大。因此,一旦開始記錄,即便關閉頁面,甚至關閉 Chrome,Background Fetch 和 Background Sync 事件也會繼續記錄(最多三天)。

Application 面板,點擊 Background FetchBackground Sync 選項,然後點擊 Record 開始記錄。點擊事件查看更多資訊。

Background Fetch 介紹可參考:Background Fetch

Background Sync 介紹可參考:Background Sync

DevTools(Chrome 77)的新增功能

複製元素樣式

右鍵點擊 DOM 樹中的節點,將該節點的 CSS 複製到剪貼板。

布局變化可視化

注意:使用這個功能可能會導致螢幕閃爍。

如果頁面沒有為圖片和廣告預留空間,當圖片和廣告載入完成,瀏覽器必須將其他內容下移而留出空間,這時內容可能會跳來跳去,這個問題就是布局移動。解決方案是使用 placeholders。

DevTools 現在可以檢測布局偏移:

  1. 打開 Command Menu。
  2. 輸入 Rendering
  3. 運行 Show Rendering
  4. 選中 Layout Shift Regions 複選框。這時與頁面進行交互,布局變化會突出顯示為藍色。

Audits 面板下的 Lighthouse 5.1

Audits 面板現在使用 Lighthouse 5.1 版本。新的檢查項包括:

  • 是否有可用的 apple-touch-icon。檢查是否可以將 PWA 添加到 iOS 主螢幕。
  • 請求數量、文件大小。報告各種類別的網路請求總數和文件大小,例如 documents, scripts, stylesheets, images 等。
  • 首次輸入延遲。衡量用戶首次與網站進行交互(即當點擊鏈接,按鈕或使用 JavaScript 控制項)到瀏覽器實際能夠訪問之間的時間。請注意,此度量標準替代了 預估輸入延遲(Estimated Input Latency)度量標準。此項不影響 Performance 類別得分。

Lighthouse 5.1 的 Node 和 CLI 版本更新可參考:

  • Performance Budgets.
  • Plugins.
  • Stack Packs.

系統主題同步

如果使用作業系統的深色主題,DevTools 會自動切換到 深色主題。

Breakpoint Editor 的快捷鍵

焦點在 Sources 面板中的編輯器時,按下 Control + Alt + B 或 Command + Option + B(Mac)打開 斷點編輯器。斷點編輯器可以用來創建日誌斷點和條件斷點。

Network 面板中展示 Prefetch cache

當資源從 prefetch cache 中載入,在 Network 面板的 Size 列會顯示 prefetch cache 。prefetch cache 是一種新的 Web 功能,可加快頁面的載入速度。Can I use… 顯示,截至 2019 年 7 月,全球 83.33% 的瀏覽器都支援這個特性。

Size 列顯示prefetch2.htmlprefetch2.css來自(prefetch cache)

更多可參考:prefetch cache

示例:prefetch cache demo

查看對象的私有屬性

控制台現在支援顯示私有類欄位。

#color 在左側的舊版 Chrome 中不會顯示,而右側的新版本中會顯示。

Application 面板 Notifications and push messages

現在,Application 面板的 Background Services 支援查看 Push Messages 和 Notifications。當伺服器向 service worker 發送資訊時,將出現在 Push Messages。當 service worker 或頁面腳本向用戶顯示資訊時,會出現在 Notifications。

與 Chrome 76 的 Background Fetch and Background Sync 功能一樣,一旦開始記錄,即使關閉頁面,甚至關閉 Chrome,頁面上的推送消息和通知錄也會持續記錄 3 天。

Push Messages 相關可參考:Web Push Notifications

Notifications 相關可參考:Displaying a Notification

DevTools(Chrome 78)的新增功能

Audits 面板支援多客戶端

Audits 面板現在可以跟其他 DevTools 功能,如 Request Blocking 和 Local Overrides 結合使用 。

假設 Audits 面板報告此頁面的性能得分為 70,而最大的性能影響因素之一就是 eliminating render-blocking resources。

初始性能得分。

初始報告顯示存在 3 個阻礙渲染的腳本。

現在可以結合 request blocking,首先可以通過 禁用阻礙渲染的腳本,來快速判斷阻礙渲染的腳本對載入性能的影響

使用 Request Blocking 選項卡禁用有問題的腳本。

然後再次審核頁面:

阻止有問題的腳本後,性能得分提高到了 97。

Payment Handler 調試

現在,Application 面板的 Background Services 部分,支援 Payment Handler(付款) 事件。

  1. 轉到 Application面板。
  2. 打開 Payment Handler 窗口。
  3. 點擊 記錄。即使關閉了 DevTools,DevTools 也會記錄 3 天的 Payment Handler 事件。
  1. 如果 Payment Handler 事件發生在其他域,可以啟用 Show events from other domains 選項。
  2. 觸發付款處理事件後,點擊事件行以了解有關該事件的更多資訊。

Payment Handler 相關介紹可參考:Payment Handler

Audits 面板下的 Lighthouse 5.2

Audits 面板,使用 Lighthouse 5.2 版本。新增 Third-Party Usage 審核項可以判斷頁面請求了多少第三方程式碼,以及頁面載入時第三方程式碼阻塞了主執行緒多長時間。

可參考 Optimize your third-party resources 了解有關第三方程式碼如何降低載入性能的更多資訊。

Performance panel 中查看最大繪製內容

Performance 面板中分析載入性能時,Timing 現在新增了一個最大繪製內容(largetst contentful paint, LCP)的標誌。LCP 記錄了視圖中可見的內容最大的元素的渲染時間。

高亮顯示與 LCP 關聯的 DOM 節點:

  1. 點擊 Timings 部分中的 LCP 標記。
  2. 將滑鼠懸停在 Summary 選項卡中的 Related Node 上高亮顯示視圖中的節點。
  1. 點擊相關節點可在 DOM 樹中將其選中。

更多參考

Chrome DevTools 最近的更新到此就介紹完了,更多的介紹可以參考

What's New In DevTools (Chrome 74)

What's New In DevTools (Chrome 75)

What's New In DevTools (Chrome 76)

What's New In DevTools (Chrome 77)

What's New In DevTools (Chrome 78)