Chrome 77 開發者工具新特性

西樓聽雨發表於2019-07-28
Chrome
  • 文件說明
  • 新特性一：可將某個元素最終生效的 CSS 樣式規則複製出來
    • 在 DOM 樹中，可通過新的右鍵選單將選中的 DOM 節點的 CSS 複製到剪貼簿
      Chrome 77 開發者工具新特性
    • 這可能對開發人員非常有用，比如當某個元素的樣式時由多個 CSS 檔案中的多個樣式規則重疊合並而成的，這個時候你想取到這個元素的最終樣式就可以通過這個選單來實現。
  • 新特性二：將佈局偏移視覺化
    • 假設你現在正在閱讀一篇新聞文章，在閱讀的過程中，你經常會突然不知道自己當前所處的位置了，這個問題就叫做“layout shifting”佈局偏移，它通常發生於圖片或廣告完成載入時，因為頁面沒有在一開始給這些圖片和廣告預留好佔位空間，所以在他們載入完成時，瀏覽器必須將其之後的頁面內容往下推移，以為其製造空間。
    • 現在我們可以通過以下步驟來檢測出佈局偏移：
      • 1. 開啟 Command Menu （Ctrl+Shift+P）
      • 2. 在彈出的輸入框中輸入“Rendering”
      • 3. 選中 “Show Rendering”命令並回車執行
      • 4. 勾選 “Layout Shift Regions”核取方塊，這樣之後，當你再與頁面進行互動時，如果發生佈局移動，開發者工具就會用藍色半透明區塊標記出來
        Chrome 77 開發者工具新特性
  • 新特性三：Audits 皮膚所採用的 Lighthouse 更新至了 5.1 版本
    其實在 Chrome 76 中就已經更新到了 5.1 版本，只是上次的更新文件中沒有做出描述，現在補充
    • 新的版本新增了以下審計專案和指標資料：
      • 1. 檢查 PWA 應用是否支援新增到 iOS 桌面
      • 2. 報告各類網路請求的總數及檔案總大小，比如文件類（documents）、指令碼類（scripts），樣式類（stylesheets），圖片類（images）等等
      • 3. 測量最大可能的首次互動延遲，即測量使用者首次與頁面進行互動，到瀏覽器對其做出相應的最大可能的時長。
        注意：這項指標是作為之前的 Estimated Input Latency 指標的替代的；且該項指標並不對 Performance 評分產生影響
    • 新的 Audits 皮膚介面：
      Chrome 77 開發者工具新特性
    • 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…
  • 新特性四：主題色將自動保持與作業系統主題一致
    • 如果你的作業系統使用的是暗色主題，現在，開發者工具也會自動切換到它的暗色主題
    • 擴充套件資料
  • 新特性五：新增在程式碼行中時開啟斷點編輯器的快捷鍵
  • 新特性六：如果資源是從 Prefetch 快取中載入的，將會在 Network 皮膚中 Size 列說明
    • 當某個資源是從 Prefetch 快取中載入的，在 Network 皮膚的 Size 列就會顯示為 (prefetch cache) 。Prefetch 是一項新的 Web 平臺特性，它主要用來提高後續頁面的載入速度。"Can I Use" 網站上顯示，直到 2019 年 7 月為止，它在所有瀏覽器中的支援程度已經達到 83.33%。
      Chrome 77 開發者工具新特性
    • 擴充套件資料
  • 新特性七：在 Console 中展開物件時，其私有屬性也將顯示出來
    • 左邊是老版本的效果，並沒有顯示 #color 欄位；右邊的新版本的效果則有顯示。
      Chrome 77 開發者工具新特性
    • 擴充套件資料
  • 新特性八：新增對通知和推送訊息的錄製支援
    • 在 Application 皮膚中的 Background Services 目錄下新增了 Notifications（通知）和 Push Messages（推送訊息）專案。Push Messages 發生於伺服器向 Service Worker 傳送訊息的時候，而 Notifications 則發生於 Service Worker 或者頁面指令碼向使用者展示通知的時候。
    • 和 Chrome 76 中引入的 Background Fetch 和 Background Sync 一樣，一旦你點選了錄製，那麼 3 天之內，這個頁面所有的 Push Message 和 Notification 都會被記錄下來，即便頁面被關閉，甚至退出瀏覽器。
      Chrome 77 開發者工具新特性
  • 關聯文件
  • 其他說明
    • 本文同時釋出與於
    • 我就是21世紀最偉大的發明​​
    • 打賞：你的一枚硬幣，培養的卻可能是下一代比爾·蓋茨
      Chrome 77 開發者工具新特性
    • 聯絡 & 交流 & 聘用
      Chrome 77 開發者工具新特性


相關文章