Chrome 77 开发者工具新特性

997 阅读5分钟
  • **文档说明

  • 新特性一:可将某个元素最终生效的 CSS 样式规则复制出来

    • 在 DOM 树中,可通过新的右键菜单将选中的 DOM 节点的 CSS 复制到剪贴板

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efa92c7863~tplv-t2oaga2asx-image.image)
    • 这可能对开发人员非常有用,比如当某个元素的样式时由多个 CSS 文件中的多个样式规则重叠合并而成的,这个时候你想取到这个元素的最终样式就可以通过这个菜单来实现。

  • 新特性二:将布局偏移可视化

    • 假设你现在正在阅读一篇新闻文章,在阅读的过程中,你经常会突然不知道自己当前所处的位置了,这个问题就叫做“layout shifting”布局偏移,它通常发生于图片或广告完成加载时,因为页面没有在一开始给这些图片和广告预留好占位空间,所以在他们加载完成时,浏览器必须将其之后的页面内容往下推移,以为其制造空间。
    • 现在我们可以通过以下步骤来检测出布局偏移:
      • 1. 打开 Command Menu (Ctrl+Shift+P)

      • 2. 在弹出的输入框中输入“Rendering”

      • 3. 选中 “Show Rendering”命令并回车执行

      • 4. 勾选 “Layout Shift Regions”复选框,这样之后,当你再与页面进行交互时,如果发生布局移动,开发者工具就会用蓝色半透明区块标记出来

        ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efad9a4504~tplv-t2oaga2asx-image.image)
  • 新特性三:Audits 面板所采用的 Lighthouse 更新至了 5.1 版本
    其实在 Chrome 76 中就已经更新到了 5.1 版本,只是上次的更新文档中没有做出描述,现在补充

    • 新的版本新增了以下审计项目和指标数据:

      • 1. 检查 PWA 应用是否支持添加到 iOS 桌面
      • 2. 报告各类网络请求的总数及文件总大小,比如文档类(documents)、脚本类(scripts),样式类(stylesheets),图片类(images)等等
      • 3. 测量最大可能的首次交互延迟,即测量用户首次与页面进行交互,到浏览器对其做出相应的最大可能的时长。
        注意:这项指标是作为之前的 Estimated Input Latency 指标的替代的;且该项指标并不对 Performance 评分产生影响
    • 新的 Audits 面板界面:

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efb4bfbf65~tplv-t2oaga2asx-image.image)
    • 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…
  • 新特性四:主题色将自动保持与操作系统主题一致

    • 如果你的操作系统使用的是暗色主题,现在,开发者工具也会自动切换到它的暗色主题
    • 扩展资料
  • 新特性五:新增在代码行中时打开断点编辑器的快捷键

    • 如果光标当前整处于 Sources 面板中的编辑器中,可通过按 Control+Alt+B 或者 Command+Option+B (Mac) 打开断点编辑器,以此创建、编辑 Logpoints (日志点) 和 Conditional Breakpoints(条件性断点)

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efb8b3f03b~tplv-t2oaga2asx-image.image)
    • 扩展资料

  • 新特性六:如果资源是从 Prefetch 缓存中加载的,将会在 Network 面板中 Size 列说明

    • 当某个资源是从 Prefetch 缓存中加载的,在 Network 面板的 Size 列就会显示为 (prefetch cache) 。Prefetch 是一项新的 Web 平台特性,它主要用来提高后续页面的加载速度。"Can I Use" 网站上显示,直到 2019 年 7 月为止,它在所有浏览器中的支持程度已经达到 83.33%。

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efb070cf2c~tplv-t2oaga2asx-image.image)
    • 扩展资料

  • 新特性七:在 Console 中展开对象时,其私有属性也将显示出来

    • 左边是老版本的效果,并没有显示 #color 字段;右边的新版本的效果则有显示。

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368efb8611b6e~tplv-t2oaga2asx-image.image)
    • 扩展资料

  • 新特性八:新增对通知和推送消息的录制支持

    • 在 Application 面板中的 Background Services 目录下新增了 Notifications(通知)和 Push Messages(推送消息)项目。Push Messages 发生于服务器向 Service Worker 发送消息的时候,而 Notifications 则发生于 Service Worker 或者页面脚本向用户展示通知的时候。

    • 和 Chrome 76 中引入的 Background Fetch 和 Background Sync 一样,一旦你点击了录制,那么 3 天之内,这个页面所有的 Push Message 和 Notification 都会被记录下来,即便页面被关闭,甚至退出浏览器。

      ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/7/28/16c368eff01fb9e0~tplv-t2oaga2asx-image.image)
  • 关联文档