Chrome 77 開發者工具新特性

• 文檔說明
  • 做者：西樓聽雨
  • 禁止轉載
  • 本文同時發佈於幕布平臺：mubu.com/doc/vRYtzQS…
• 新特性一：可將某個元素最終生效的 CSS 樣式規則複製出來
  • 在 DOM 樹中，可經過新的右鍵菜單將選中的 DOM 節點的 CSS 複製到剪貼板
    
  • 這可能對開發人員很是有用，好比當某個元素的樣式時由多個 CSS 文件中的多個樣式規則重疊合並而成的，這個時候你想取到這個元素的最終樣式就能夠經過這個菜單來實現。
• 新特性二：將佈局偏移可視化
  • 假設你如今正在閱讀一篇新聞文章，在閱讀的過程當中，你常常會忽然不知道本身當前所處的位置了，這個問題就叫作「layout shifting」佈局偏移，它一般發生於圖片或廣告完成加載時，由於頁面沒有在一開始給這些圖片和廣告預留好佔位空間，因此在他們加載完成時，瀏覽器必須將其以後的頁面內容往下推移，覺得其製造空間。
  • 如今咱們能夠經過如下步驟來檢測出佈局偏移：
    • 1. 打開 Command Menu （Ctrl+Shift+P）
    • 2. 在彈出的輸入框中輸入「Rendering」
    • 3. 選中 「Show Rendering」命令並回車執行
    • 4. 勾選 「Layout Shift Regions」複選框，這樣以後，當你再與頁面進行交互時，若是發生佈局移動，開發者工具就會用藍色半透明區塊標記出來
      
• 新特性三：Audits 面板所採用的 Lighthouse 更新至了 5.1 版本
  其實在 Chrome 76 中就已經更新到了 5.1 版本，只是上次的更新文檔中沒有作出描述，如今補充
  • 新的版本新增瞭如下審計項目和指標數據：
    • 1. 檢查 PWA 應用是否支持添加到 iOS 桌面
      • 對應該項的說明和指導: Provides a valid apple-touch-icon
        developers.google.com/web/fundame…
    • 2. 報告各種網絡請求的總數及文件總大小，好比文檔類（documents）、腳本類（scripts），樣式類（stylesheets），圖片類（images）等等
      • 對應該項的說明和指導：Keep request counts and file sizes low （請保持請求數量和文件大小低位）
        developers.google.com/web/tools/l…
    • 3. 測量最大可能的首次交互延遲，即測量用戶首次與頁面進行交互，到瀏覽器對其作出相應的最大可能的時長。
      注意：這項指標是做爲以前的 Estimated Input Latency 指標的替代的；且該項指標並不對 Performance 評分產生影響
      • 對應該項的說明和指導：Maximum Potential First Input Delay
        developers.google.com/web/updates…
  • 新的 Audits 面板界面：
    
  • Lighthouse 5.1 的 Node 和 CLI 版本還有 3 個值得了解的新特性：
    • 1. Performance Budgets （性能預算）：經過設定網絡請求的數量和文件總大小的上限，在後續對網站進行審計時，以此檢查出可能出現的「退化」
      developers.google.com/web/tools/l…​
    • 2. Plugins （插件）：可經過自定義的審計項來擴展 Lighthouse
      github.com/GoogleChrom…
    • 3. Stack Packs （技術棧包）：能夠經過他添加指定的技術棧包到 Lighthouse，以此提供與此技術棧相關的審計項，WordPress Stack Pack 是第一個發佈的技術棧包，正在開發中的還有 React 和 AMP 技術棧包。
      github.com/GoogleChrom…
• 新特性四：主題色將自動保持與操做系統主題一致
  • 若是你的操做系統使用的是暗色主題，如今，開發者工具也會自動切換到它的暗色主題
  • 擴展資料
    • 開發者工具的暗色主題
      developers.google.com/web/tools/c…
• 新特性五：新增在代碼行中時打開斷點編輯器的快捷鍵
  • 若是光標當前整處於 Sources 面板中的編輯器中，可經過按 Control+Alt+B 或者 Command+Option+B (Mac) 打開斷點編輯器，以此建立、編輯 Logpoints (日誌點) 和 Conditional Breakpoints（條件性斷點）
    
  • 擴展資料
    • Logpoints
      developers.google.com/web/updates…
    • Conditional Breakpoints
      developers.google.com/web/tools/c…
• 新特性六：若是資源是從 Prefetch 緩存中加載的，將會在 Network 面板中 Size 列說明
  • 當某個資源是從 Prefetch 緩存中加載的，在 Network 面板的 Size 列就會顯示爲 (prefetch cache) 。Prefetch 是一項新的 Web 平臺特性，它主要用來提升後續頁面的加載速度。"Can I Use" 網站上顯示，直到 2019 年 7 月爲止，它在全部瀏覽器中的支持程度已經達到 83.33%。
    
  • 擴展資料
    • Prefetch
      developers.google.com/web/fundame…​
    • Can I Use 網站給出的關於 Prefetch 的支持狀況表
      caniuse.com/#feat=link-…
    • Prefetch 效果演示
      devtools.glitch.me/wndt77/pref…
• 新特性七：在 Console 中展開對象時，其私有屬性也將顯示出來
  • 左邊是老版本的效果，並無顯示 #color 字段；右邊的新版本的效果則有顯示。
    
  • 擴展資料
    • 私有實例字段（Private Class Field）
      v8.dev/features/cl…
• 新特性八：新增對通知和推送消息的錄製支持
  • 在 Application 面板中的 Background Services 目錄下新增了 Notifications（通知）和 Push Messages（推送消息）項目。Push Messages 發生於服務器向 Service Worker 發送消息的時候，而 Notifications 則發生於 Service Worker 或者頁面腳本向用戶展現通知的時候。
  • 和 Chrome 76 中引入的 Background Fetch 和 Background Sync 同樣，一旦你點擊了錄製，那麼 3 天以內，這個頁面全部的 Push Message 和 Notification 都會被記錄下來，即使頁面被關閉，甚至退出瀏覽器。
    
• 關聯文檔
  • Chrome 76 開發者工具新特性
    mubu.com/doc/9bPKhv7…
  • Chrome 77 新特性
    待更新
  • Chrome 更新日誌目錄
    mubu.com/doc/AObcWUR…
• 其餘說明
  • 本文同時發佈與於
    • 幕布平臺：mubu.com/doc/vRYtzQS…
    • 做者：洛水驚鴻
      
  • 我就是21世紀最偉大的發明​​
  • 打賞：你的一枚硬幣，培養的卻多是下一代比爾·蓋茨
    
  • 聯繫 & 交流 & 聘用