【译】Chrome77 Devtools有哪些新功能？
【译】Chrome77 Devtools有哪些新功能？
复制元素样式
我们可以在打开开发者工具后，鼠标右击某个dom树中的节点，选择Copy -> Copy Styles即可将dom元素的样式复制到剪贴板中。
copystyles
可视化布局变换
此功能可能会导致屏幕闪烁很多，如果您容易复发光敏性癫痫，可能不适合您。
假设我们正在自己喜欢的网站上阅读新闻文章，当我们正在阅读该页面时，会发现内容位置不停的在变化跳跃，这个就叫做布局变换。它通常在图像和广告完成加载时发生。
该页面没有为图像或广告预留任何空间，因此浏览器必须将所有其他内容向下移动来为它们腾出空间。这种情况的解决方案是使用占位符。
layout shift
现在开发者工具可以帮助我们检测布局变换（详见issue#961846）：
勾选Rendering菜单中的Layout Shift Regions选项，便可以在页面进行交互时，检测到布局变换，此时发生布局变换的内容会以蓝色突出显示。
layout shift2
如何打开菜单栏Rendering并勾选Layout Shift Regions？
- 方式一
- 打开命令菜单（mac osx快捷键: Alt + p, windows快捷键: ctrl + p）
- 键入
Rendering - 执行
Show Rendering命令 - 勾选
Layout Shift Regions
- 方式二
- 点击开发者工具右上角菜单栏入口
<img src="https://qpic.url.cn/feeds_pic/ajNVdqHZLLBoHPD8FH9F5cPGib4DOWsFe1tv2tebUlgnCnbf0dicsIog/" width="120" />
- 选择
more tools -> Rendering - 勾选
Layout Shift Regions
Audits面板运行Lighthoust5.1
这个更新实际上是在Chrome 76中发布的。我们没有在DevTools的新功能（Chrome 76）中介绍它，所以我们现在介绍它。
Audits面板现在运行Lighthouse 5.1。新审查包括：
Lighthouse是一个开源的自动化工具，以此分析Web应用程序和网页，收集现代性能指标和开发人员最佳实践的见，来提升web应用程序的性能和质量。
- 通过检查开发者是否提供了有效的apple-touch-icon图标，来确定是否可以将PWA添加到iOS主屏幕。
- 保留请求数和文件大小。报告各种类别的网络请求和文件大小的总数，例如文档，脚本，样式表，图像等。
Request Counts and File Size Audits
- 最大FID（First Input Delay）潜在时长。衡量用户的首页交互与浏览器对该交互的响应之间的最大潜在时间，简单讲就是用户首次与站点交互时（即单击链接，点击按钮或使用自定义的由JavaScript驱动的控件）到浏览器实际能够做出响应的最大时长。
Maximum Potential First Input Delay
打开断点编辑器的键盘快捷键
在开发者工具Sources面板的编辑器中鼠标聚焦时按Control + Alt + B或Command + 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功能。