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

時間 2019-12-21

標籤一文洞察 chrome devtools 半年更新哪些功能欄目 Chrome 简体版

原文原文鏈接

本文首發於政採雲前端團隊博客：一文洞察 Chrome DevTools 近半年更新了哪些新功能

本文由政採雲前端團隊 @子洋同窗翻譯，原文可訪問：https://developers.google.com...javascript

前言

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

DevTools（Chrome 74）的新增功能

高亮顯示全部受 CSS 屬性影響的節點

將鼠標懸停在會影響節點盒子模型的 CSS 屬性上，如 padding 或 margin ，會高亮顯示受到這個屬性聲明影響的全部節點。html

Audits 面板中的 Lighthouse v4

新增長的 Tap targets are not sized appropriately 能夠檢查移動設備上的交互式元素（如按鈕和連接）是否設置了合適的尺寸和間隔。前端

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

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

Lighthouse 相關介紹可參考：Lighthousegithub

新增 WebSocket 二進制消息查看器

查看 WebSocket 二進制消息的內容：web

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

可使用底部的下拉菜單將消息轉換爲 Base64 或 UTF-8。點擊複製到剪貼板 能夠複製二進制消息。chrome

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

區域截圖能夠捕獲窗口一部分的屏幕截圖。這個功能以前訪問入口很是隱蔽，如今能夠從 Command Menu 直接使用區域截圖。數據庫

打開 DevTools，而後按 Control + Shift + P 或 Command + Shift + P（Mac）打開 Command Menu（命令菜單）。
輸入 area，選擇 Capture area screenshots，而後 Enter。
將鼠標拖到要截屏的部分。
選擇窗口的一部分截圖。

Network 面板中的 Service Worker 過濾器

在 Network 篩選框中輸入 is:service-worker-initiated 或 is: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 Fetch 或 Background Sync 選項，而後點擊 Record 開始記錄。點擊事件查看更多信息。

Background Fetch 介紹可參考： Background Fetch

Background Sync 介紹可參考：Background Sync

DevTools（Chrome 77）的新增功能

複製元素樣式

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

佈局變化可視化

注意：使用這個功能可能會致使屏幕閃爍。

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

DevTools 如今能夠檢測佈局偏移：

打開 Command Menu。
輸入 Rendering。
運行 Show Rendering 。
選中 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 版本更新可參考：

系統主題同步

若是使用操做系統的深色主題，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.html和 prefetch2.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（付款）事件。

轉到 Application面板。
打開 Payment Handler 窗口。
點擊記錄。即便關閉了DevTools，DevTools 也會記錄 3 天的 Payment Handler 事件。
若是 Payment Handler 事件發生在其餘域，能夠啓用 Show events from other domains 選項。
觸發付款處理事件後，點擊事件行以瞭解有關該事件的更多信息。

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 節點：

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

招賢納士

招人，前端，隸屬政採雲前端大團隊（ZooTeam），50 餘個小夥伴正等你加入一塊兒浪～若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5年工做時間3年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com