Chrome 78 開發者工具新特性

時間  2020-01-20
標籤 chrome 開發者 工具 特性 欄目 Chrome 简体版
原文   原文鏈接
  • 本文參考自：What's New In DevTools (Chrome 78)
  • developers.google.com/web/updates…（需越牆）
  • 新特性一：Audits 面板也開始支持調出其餘小面板以便於調試
    • 在 Chrome 78 以前，咱們是不能在 Audits 面板中調出如 Request Blocking、Local Overrides 這類小面板的。如今有了這個新功能，咱們能夠對咱們的網頁應用作更多的測量和診斷。
    • 例如，假設你對某個網頁作了一次 Audits，該 Audits 報告中顯示該網頁的性能得分爲 70，並告訴你最大的性能優化項是消除阻塞式的資源。以下圖：
    • 如今，藉助這項新特性，你能夠經過調出 Request Blocking 面板，將存在性能問題的資源屏蔽，而後再次執行一次 Audits，以此快速初步得出優化後的性能提高。以下圖：
    • 除了這個例子外還有許多應用場景，如能夠經過 Local Overrides 面板給 script 標籤添加 async 屬性進行性能對比，讀者能夠自行嘗試。
    • 相關連接：
  • 新特性二：支持對 Payment Handler 進行調試
    • Application 面板中的 Background Services 標籤下如今新增了 Payment Handler 事件的記錄，以下圖：
    • 注意：
      • 1. 點擊錄製按鈕（紅色圓形按鈕），會記錄 3天內發生的 Payment Handler 事件——即使你關閉了開發者工具。
      • 2. 若是 Payment Handler 事件發生於其餘源（Origin）下，記得勾選 Show events from others domains選項。
      • 錄製後的效果以下圖：
  • 新特性三：Audits 面板所使用的 Lighthouse 已經更新至了 5.2 版本
    • Audits 面板實際運行的就是 Lighthouse 工具，在 Lighthouse 5.2 中，新增了 Third-Party Usage 診斷項，他能夠給出你的網頁應用請求了多少第三方代碼，以及他們在頁面加載過程當中所佔用的主線程時間。以下圖：
    • 注意：
      • 1. 其實在 Chrome 77 中就已經採用了 Lighthouse 5.2，只是沒有在 Chrome 77 的更新日誌中作介紹，在此補上。
    • 相關連接
  • 新特性四：Performance 面板的時間線上新增 Largest Contentful Paint 指標標記
    • 以下圖：
    • 咱們在作性能分析時，Larget Contentful Paint （LCP）是一項很是重要的指標，它的含義是在可視的 Viewport 中最大的內容性元素繪製的開始時間及所用時長
    • 咱們能夠點擊時間線上的 LCP 標識，而後將光標懸浮在下面 Summary 標籤中的 Related Node 上，以此查看最大的內容性元素究竟是哪一個；若是接着再點擊該元素，還能夠直接定位到 Element 面板中的 DOM 樹上。
    • 相關連接
  • 新特性五：支持直接在開發者工具主菜單中反饋開發者工具的問題
    • 反饋路徑：Main Menu > Help > Report a DevTools issue。以下圖：

      能夠反饋任何開發者工具所存在的問題，以及你的建議，也能夠經過此來提出新特性請求。
  • 關聯文檔
  • 其餘說明
    • 本文同時發佈與於
    • 做者：西樓聽雨（微信名 t.t.）
      我就是21世紀最偉大的發明​​
    • 打賞：你的一枚硬幣，造就的卻多是下一代比爾·蓋茨
    • 聯繫 & 交流 & 聘用
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程