专栏首页腾讯IVWEB团队的专栏【译】Chrome77 Devtools有哪些新功能?

【译】Chrome77 Devtools有哪些新功能?

复制元素样式

我们可以在打开开发者工具后,鼠标右击某个dom树中的节点,选择Copy -> Copy Styles即可将dom元素的样式复制到剪贴板中。

copystyles

可视化布局变换

此功能可能会导致屏幕闪烁很多,如果您容易复发光敏性癫痫,可能不适合您。

假设我们正在自己喜欢的网站上阅读新闻文章,当我们正在阅读该页面时,会发现内容位置不停的在变化跳跃,这个就叫做布局变换。它通常在图像和广告完成加载时发生。

该页面没有为图像或广告预留任何空间,因此浏览器必须将所有其他内容向下移动来为它们腾出空间。这种情况的解决方案是使用占位符

layout shift

现在开发者工具可以帮助我们检测布局变换(详见issue#961846):

勾选Rendering菜单中的Layout Shift Regions选项,便可以在页面进行交互时,检测到布局变换,此时发生布局变换的内容会以蓝色突出显示。

layout shift2

如何打开菜单栏Rendering并勾选Layout Shift Regions

  • 方式一
  1. 打开命令菜单(mac osx快捷键: Alt + p, windows快捷键: ctrl + p)
  2. 键入Rendering
  3. 执行Show Rendering命令
  4. 勾选Layout Shift Regions
  • 方式二
  1. 点击开发者工具右上角菜单栏入口

<img src="https://qpic.url.cn/feeds_pic/ajNVdqHZLLBoHPD8FH9F5cPGib4DOWsFe1tv2tebUlgnCnbf0dicsIog/" width="120" />

  1. 选择more tools -> Rendering
  2. 勾选Layout Shift Regions

Audits面板运行Lighthoust5.1

这个更新实际上是在Chrome 76中发布的。我们没有在DevTools的新功能(Chrome 76)中介绍它,所以我们现在介绍它。

Audits面板现在运行Lighthouse 5.1。新审查包括:

Lighthouse是一个开源的自动化工具,以此分析Web应用程序和网页,收集现代性能指标和开发人员最佳实践的见,来提升web应用程序的性能和质量。

Request Counts and File Size Audits

  • 最大FID(First Input Delay)潜在时长。衡量用户的首页交互与浏览器对该交互的响应之间的最大潜在时间,简单讲就是用户首次与站点交互时(即单击链接,点击按钮或使用自定义的由JavaScript驱动的控件)到浏览器实际能够做出响应的最大时长。

Maximum Potential First Input Delay

打开断点编辑器的键盘快捷键

在开发者工具Sources面板的编辑器中鼠标聚焦时按Control + Alt + BCommand + Option + B(Mac) 以打开“断点编辑器”。然后使用断点编辑器来创建日志断点条件断点

breakpointeditor

Network面板预缓存

当从prefetch cache加载一个资源时,Network面板的Size列将会显示(prefetch cache)。

Prefetch即预提取,是一种新鲜的web特性,用于后续页面的加速加载。

Prefetch就是通过告知浏览器未来跳转或用户互动将用到的资源,例如,如果用户做出我们期望的行为,则表示其可能稍后才需要某资源。 当前页面完成加载后,且带宽可用的情况下,这些资源将在 Chrome 中以 Lowest 优先级被提取。这意味着,prefetch 最适合抢占用户下一步可能进行的操作并为其做好准备,例如检索结果列表中首个产品的详情页面或检索分页内容的下一页。

prefetch cache

Can I Use...中显示自2019年7月以来,它在全球83.33%的浏览器中都得到了支持。

hints: prefetch

这儿有一个Prefetch Demo

查看对象的私有属性

Console(控制台)面板现在可以显示其对象的私有类属性

private fields

左侧的旧版Chrome在检查对象时不显示#color字段,而右侧的新版本则显示#color字段。

Application 面板中的通知和消息推送

Application面板的Background Services部分现在支持「Notifications」和 「Push Messaging」。

当服务器向service worker发送消息时会出现在Push Messaging,当service worker或页面脚本给用户push消息时会出现在Notifications

Chrome 76特性中的Background Fetch和Background Sync一样,一旦你开始录制,即使页面被关闭,甚至Chrome被关闭,此页面上的Push Messages和Notifications也会被记录3天。

下载Chrome Canary版本作为你的默认浏览器开发版,Canary会为你提供最新的DevTools功能。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5 的复制操作

    HTML5 现在能完美提供给我们的应该就是 copy 事件的使用,对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述,可以了...

    腾讯IVWEB团队
  • Web 推送技术授权

    伴随着今年 Google I/O 大会的召开,一个很火的概念--Progressive Web Apps 诞生了。这代表着我们 web 端有了和原生 APP 媲...

    腾讯IVWEB团队
  • 【IVWeb知识weekly】第5期

    5. Front-End Performance Checklist 2017 (PDF, Apple Pages)

    腾讯IVWEB团队
  • iOS开发 Xcode的各种调试、DEBUG

    BY
  • Chrome 74 带来的新功能[每日前端夜话0x66]

    Chrome 74 已经发布了,虽然从用户的角度来看并没有什么令人兴奋的东西,但是对开发人员来说带来了一些好处。新版本附带了新的 Javascript 私有类字...

    疯狂的技术宅
  • Spotlight on Mysql详细介绍

    1. 版本..............................................................................

    授客
  • 变性、衰老、染发后长啥样?简易版StarGAN全知道 | 代码

    昨天,网友taki0112公布了一个简易版StarGAN TensorFlow实现,不到一天时间就在Reddit论坛上热度暴增到700。

    量子位
  • Python | Debugger和pdb,鸡肋否?

    我们知道虽然入门级编程语言最好是C和Python,但是C和Python是有这本质的不同的,那就是C语言是编译型语言,而Python是解释型语言。

    LogicPanda
  • Pages Service for GitCafe Project

    6.通过访问username.gitcafe.io/projectname/,例如http://hujiawei.gitcafe.io/resourcerepo...

    宅男潇涧
  • AI已火,宗教当生,硅谷出了个“洪秀全”

    没错,就是那个前Google无人车和前Uber无人车的负责人莱万,那个引发全球无人车第一场官司的莱万,那个从硅谷天才少年到专利“小偷”的莱万。

    量子位

扫码关注云+社区

领取腾讯云代金券