Chrome最近更新了最新的87版本，这是今年Chrome的最后一次更新。这个版本是Chrome多年来性能上最大的提升，开发者工具也有了很大的更新。有用户认为，Chrome的性能问题被诟病已久，但在新版Edge问世后，性能突然提升。这显然是因为谷歌一直受到Edge市场份额急剧上升的压力。另外，Mac上的Chrome也更新了图标，应该是适应了BigSur特制的设计。原文：https://developers.google.com/web/updates/2020/10/devtoolsPS：最新的Chrome更新视频是一位日本女性的解说。这口语真的醉了...1.新的CSSGrid调试工具DevTools现在对CSSGrid有更好的支持。CSS网格调试当页面上的HTML元素具有display:grid或display:inline-grid时，您可以在元素面板中看到它旁边有一个Grid标签。单击标记可切换页面上网格覆盖的突出显示。新的Layout子面板有一个Grid选项卡，它提供了一些用于查看Grid的选项。查看文档以了解更多信息。对应于Chromium问题：10473562。新的WebAuthn面板现在可以模拟身份验证器并使用新的WebAuthn选项卡调试Web身份验证API。WebAuthn如图选择更多选项>更多工具>WebAuthn，打开WebAuthn面板。WebAuthn选项卡在WebAuthn选项卡之前，Chrome不支持本机WebAuthn调试。开发人员需要物理验证器来测试他们的Web应用程序。借助新的WebAuthn标签，Web开发人员现在可以模拟身份验证器、自定义其功能并检查其状态，而无需任何物理身份验证器。这使得调试体验更加容易。查看我们的文档以获取有关WebAuthn功能的更多信息。对应Chromiumissue:10346633开发者工具面板支持垂直分屏DevTools支持上下移动DevTools工具面板。这样就可以同时分屏查看任意两个工具面板。例如，如果您想同时查看元素和源面板，可以右键单击源面板并选择移至底部。移至底部同样，通过右键单击选项卡并选择移至顶部，可以将任何底部选项卡移至顶部。移动到top4。元素面板功能更新4.1在样式子面板中查看计算侧边栏您现在可以在样式面板中切换计算侧边栏。默认情况下，样式面板中的计算边栏是折叠的，单击该按钮可切换展开状态。计算侧边栏面板对应于Chromium问题：10738994.2在计算面板中对CSS属性进行分组现在可以在计算侧边栏中按类别对CSS属性进行分组。有了这个新的分组功能，在Computed中查找并有选择地关注一组相关的CSS属性变得更加容易。在“元素”面板上，选择一个元素并单击“分组”复选框以分组/取消分组CSS属性。分组CSS属性对应Chromium问题：1096230、1084673、11062515。Lighthouse更新Lighthouse6.4Lighthouse面板现已更新为Lighthouse6.4，请参阅发行说明以获取完整的新功能列表。LighthouseLighthouse6.4的新特性：Preloadfonts：报告所有使用font-display:optional的字体文件是否被预加载为Validsourcemaps：报告页面上非第三方JS的sourcemap文件是否正确大型JavaScript库（实验特性）：报告页面上的大型JS库（例如moment.js）对应于Chromium问题：7725586。performance.mark()事件的计时部分现在将标记在性能面板的事件行（计时）上。标记了Performance.mark()事件。Performance.mark事件7.网络面板中的新资源类型和url过滤条件您现在可以使用网络面板中的资源类型和url关键字来过滤网络请求。例如，使用resource-type:image过滤掉对图片的网络请求。resource-typefilter点击更多过滤条件可以查看更多类似resource-type和url的过滤用法。对应Chromiumissues：1121141、11041888Application面板Frames子面板相关更新8.1支持显示COEP和COOP的reporttofield现在可以在Frames子面板的Security&Isolation部分查看COEPreportedtoterminal-应用面板中的面板（Cross-OriginEmbedderPolicy）和COOP（Cross-OriginOpenerPolicy）。ReportingApi定义了一个名为Report-To的新HTTP标头。当一个网站违反了COEP（Cross-OriginEmbedderPolicy）和COOP（Cross-OriginOpenerPolicy）时，浏览器会为这个header指定header。地址送达报告。reportingtoendpoint关于如何启用COEP和COOP让你的网站跨域隔离，可以查看这篇文章对应Chromium问题：10514668.2Showingthereport-onlymodeofCOEPandCOOPDevtoolsisreportforCOEPandCOOP案例中of-only，添加了一个新标签来显示report-only标签。观看此视频以了解如何防止信息泄露以及如何启用COOP和COEP。对应于Chromium问题：10514669。删除更多工具菜单中的设置按钮。更多工具菜单中的设置已弃用，请从主面板打开设置。主面板中的设置对应Chromium问题：112131210。实验性功能以下功能需要在设置>实验下启用相关选项10.1CSS概述面板支持查看和修复颜色对比度问题CSS概述面板在页面列表中显示低颜色对比度文本颜色。此演示页面显示了低颜色对比度的负面案例。打开CSSOverview面板以查看所有有问题的元素的列表。低颜色对比度问题单击列表中的元素将在元素面板中打开该元素，DevTools将提供自动颜色建议以帮助修复文本的低颜色对比度问题。对应Chromiumissue:112031610.2DevTools支持自定义快捷键现在你可以在DevTools中自定义快捷键了。转到设置>快捷方式，将鼠标悬停在命令上，然后单击编辑按钮以自定义快捷方式。自定义键盘快捷方式要重置所有快捷方式，请单击恢复默认快捷方式以恢复默认快捷方式。对应于Chromium问题：174309
