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 ，分别用来录制、查看对应的事件。须要注意的是：考虑到这两类事件自己的特质——在后台进行，在你点击录制按钮后，即使你关闭标签，甚相当闭浏览器，这两类事件仍然能够被录制到。