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世纪最伟大的发明​​
  • 打赏：你的一枚硬币，培养的却多是下一代比尔·盖茨
    
  • 联系 & 交流 & 聘用