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

转载于:https://juejin.im/post/5d3d122e51882520911db850