Chrome 76 開發者工具新特性

• 文檔說明
  • 做者：西樓聽雨
  • 禁止轉載
  • 本文同時發佈於幕布平臺：mubu.com/doc/9bPKhv7…
  新特性一：經過 CSS 屬性值來完成屬性名的自動補全
  • 【現狀描述】
    • 有時候咱們在添加某些 CSS 樣式屬性時，可能只記得屬性值怎麼寫，卻記不住具體的屬性名是什麼，好比咱們想設置某個節點的字體大小爲加粗時，可能只記得 bold 這個值，但卻記得不字體大小的屬性名。
  • 【如何解決的】
    • 能夠在輸入屬性名的地方輸入屬性值，藉助於自動補全功能來補全對應屬性名。
      
• 新特性二：更易使用的 Network 面板
  • 【存在的問題】以前的 Network 面板存在的一些使用上的問題
    • 1. 在開發者工具窗口尺寸較窄的時候，面板上的許多選項就會被擠壓出界面（或者說是界面溢出）沒法觸及，例如 Throttling （網速控制）菜單
    • 2. 選項過多，都排列在工具欄，顯得比較雜亂
  • 【如何解決的】爲了解決這兩個問題，許多選項被轉移到了 Network 面板的「更多設置」面板中
    
  • 舊 Network 面板中的選項與新面板中的映射關係圖：
    
• 新特性三：HAR 導出中包含 WebSocket 消息
  • 導出的 websocket 消息存放在一個如下劃線符號開頭的名爲 _webSocketMessages 屬性上，舉例：
    • 
• 新特性四：爲 HAR 的導入導出新增對應的界面操做按鈕
  • 
• 新特性五：新增實時的總內存佔用狀況展現
  • 以前的 Memory 面板中不會總內存的佔用及實時變化狀況，如今這些信息將展現出來，展現位置見下圖中的 43.4MB 所處位置：
    
• 新特性六：新增 Service worker 的端口號顯示
  • 爲了便於調試，在 Application 面板中的 Service Workers 面板中，將會把 Service Worker 所註冊的端口號顯示：
    
• 新特性七：支持對 Background Fetch 和 Background Sync 事件進行審查（Inspect）
  • 在 Application 面板中新增了兩個側邊欄菜單：Background Fetch 和 Background Sync ，分別用來錄製、查看對應的事件。須要注意的是：考慮到這兩類事件自己的特質——在後臺進行，在你點擊錄製按鈕後，即使你關閉標籤，甚相當閉瀏覽器，這兩類事件仍然能夠被錄製到。