阅读 390

Chrome 77 开发者工具新特性

  • 文档说明
  • 新特性一:可将某个元素最终生效的 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 桌面
      • 2. 报告各类网络请求的总数及文件总大小,比如文档类(documents)、脚本类(scripts),样式类(stylesheets),图片类(images)等等
      • 3. 测量最大可能的首次交互延迟,即测量用户首次与页面进行交互,到浏览器对其做出相应的最大可能的时长。
        注意:这项指标是作为之前的 Estimated Input Latency 指标的替代的;且该项指标并不对 Performance 评分产生影响
    • 新的 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…
  • 新特性四:主题色将自动保持与操作系统主题一致
    • 如果你的操作系统使用的是暗色主题,现在,开发者工具也会自动切换到它的暗色主题
    • 扩展资料
  • 新特性五:新增在代码行中时打开断点编辑器的快捷键
  • 新特性六:如果资源是从 Prefetch 缓存中加载的,将会在 Network 面板中 Size 列说明
    • 当某个资源是从 Prefetch 缓存中加载的,在 Network 面板的 Size 列就会显示为 (prefetch cache) 。Prefetch 是一项新的 Web 平台特性,它主要用来提高后续页面的加载速度。"Can I Use" 网站上显示,直到 2019 年 7 月为止,它在所有浏览器中的支持程度已经达到 83.33%。
    • 扩展资料
  • 新特性七:在 Console 中展开对象时,其私有属性也将显示出来
    • 左边是老版本的效果,并没有显示 #color 字段;右边的新版本的效果则有显示。
    • 扩展资料
  • 新特性八:新增对通知和推送消息的录制支持
    • 在 Application 面板中的 Background Services 目录下新增了 Notifications(通知)和 Push Messages(推送消息)项目。Push Messages 发生于服务器向 Service Worker 发送消息的时候,而 Notifications 则发生于 Service Worker 或者页面脚本向用户展示通知的时候。
    • 和 Chrome 76 中引入的 Background Fetch 和 Background Sync 一样,一旦你点击了录制,那么 3 天之内,这个页面所有的 Push Message 和 Notification 都会被记录下来,即便页面被关闭,甚至退出浏览器。
  • 关联文档
  • 其他说明
    • 本文同时发布与于
    • 我就是21世纪最伟大的发明​​
    • 打赏:你的一枚硬币,培养的却可能是下一代比尔·盖茨
    • 联系 & 交流 & 聘用


关注下面的标签,发现更多相似文章
评论