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

复制元素样式

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

可视化布局变换

此功能可能会致使屏幕闪烁不少，若是您容易复发光敏性癫痫，可能不适合您。

假设咱们正在本身喜欢的网站上阅读新闻文章，当咱们正在阅读该页面时，会发现内容位置不停的在变化跳跃，这个就叫作布局变换。它一般在图像和广告完成加载时发生。 该页面没有为图像或广告预留任何空间，所以浏览器必须将全部其余内容向下移动来为它们腾出空间。这种状况的解决方案是使用占位符。

如今开发者工具能够帮助咱们检测布局变换（详见issue#961846）：

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

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

• 方式一

1. 打开命令菜单（mac osx快捷键: Alt + p, windows快捷键: ctrl + p）
2. 键入Rendering
3. 执行Show Rendering命令
4. 勾选Layout Shift Regions

• 方式二

1. 点击开发者工具右上角菜单栏入口

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

Audits面板运行Lighthoust5.1

这个更新其实是在Chrome 76中发布的。咱们没有在DevTools的新功能（Chrome 76）中介绍它，因此咱们如今介绍它。

Audits面板如今运行Lighthouse 5.1。新审查包括：

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

• 经过检查开发者是否提供了有效的apple-touch-icon图标，来肯定是否能够将PWA添加到iOS主屏幕。

• 保留请求数和文件大小。报告各类类别的网络请求和文件大小的总数，例如文档，脚本，样式表，图像等。

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

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

在开发者工具Sources面板的编辑器中鼠标聚焦时按Control + Alt + B或Command + Option + B（Mac） 以打开“断点编辑器”。而后使用断点编辑器来建立日志断点和条件断点。

Network面板预缓存

当从prefetch cache加载一个资源时，Network面板的Size列将会显示（prefetch cache）。 Prefetch即预提取，是一种新鲜的web特性，用于后续页面的加速加载。

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

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

这儿有一个Prefetch Demo

查看对象的私有属性

Console（控制台）面板如今能够显示其对象的私有类属性。

左侧的旧版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功能。

文章如有翻译纰漏，请指正，谢谢！