Chrome 76 开发者工具新特性

2,250 阅读2分钟
  • 文档说明新特性一:通过 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 ,分别用来录制、查看对应的事件。需要注意的是:考虑到这两类事件本身的特质——在后台进行,在你点击录制按钮后,即便你关闭标签,甚至关闭浏览器,这两类事件仍然可以被录制到。