【译】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

方式二

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

选择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 最适合抢占用户下一步可能进行的操作并为其做好准备，例如检索结果列表中首个产品的详情页面或检索分页内容的下一页。