Chrome今天更新了最新版本87。这是今年的最后一次Chrome更新。这个版本是Chrome多年来性能上最大的提升，开发者工具也有了很大的更新。有用户认为，Chrome的性能问题被诟病已久，但在新版Edge问世后，性能突然提升。这显然是因为谷歌一直受到Edge市场份额急剧上升的压力。另外，Mac上的Chrome也更新了图标，应该是适应了BigSur特制的设计。原文：https://developers.google.com...PS：最新的Chrome更新视频是一个日本女人的解说，这口语真的醉了...1.新增CSSGrid调试工具现在DevTools支持CSS网格有更好的支持。当页面上的HTML元素具有display:grid或display:inline-grid时，您可以在“元素”面板中看到它旁边的Grid标记。单击标记可切换页面上网格覆盖的突出显示。新的Layout子面板有一个Grid选项卡，它提供了一些用于查看Grid的选项。查看文档以了解更多信息。对应于Chromium问题：10473562。新的WebAuthn面板现在可以模拟身份验证器并使用新的WebAuthn选项卡调试Web身份验证API。如图选择更多选项>更多工具>WebAuthn，打开WebAuthn面板。在WebAuthn选项卡之前，Chrome不支持本机WebAuthn调试。开发人员需要物理验证器来测试他们的Web应用程序。借助新的WebAuthn标签，Web开发人员现在可以模拟身份验证器、自定义其功能并检查其状态，而无需任何物理身份验证器。这使得调试体验更加容易。查看我们的文档以获取有关WebAuthn功能的更多信息。对应Chromiumissue:10346633开发者工具面板支持垂直分屏DevTools支持上下移动DevTools工具面板。这样就可以同时分屏查看任意两个工具面板。例如，如果您想同时查看元素和源面板，可以右键单击源面板并选择移至底部。同样，通过右键单击选项卡并选择“移至顶部”，可以将任何底部选项卡移动到顶部。4.元素面板功能更新4.1在样式子面板中查看计算侧边栏现在您可以在样式面板中切换计算侧边栏。默认情况下，样式面板中的计算边栏是折叠的，单击该按钮可切换展开状态。对应于Chromium问题：10738994.2在Computed面板中对CSS属性进行分组CSS属性现在可以在Computed侧边栏中按类别分组。有了这个新的分组功能，在Computed中查找并有选择地关注一组相关的CSS属性变得更加容易。在“元素”面板上，选择一个元素并单击“分组”复选框以分组/取消分组CSS属性。对应Chromiumissues:1096230,1084673,11062515.Lighthouse更新Lighthouse6.4Lighthouse面板现已更新为Lighthouse6.4，完整的新功能列表请查看发行说明。Lighthouse6.4的新特性：Preloadfonts：报告所有使用font-display:optional的字体文件是否被预加载为Validsourcemaps：报告页面上非第三方JS的sourcemap文件是否正确大型JavaScript库（实验特性):报告页面上的大型JS库（例如moment.js）对应于Chromium问题：7725586。performance.mark()事件的Timing部分现在将标记在Performance面板的事件行（Timings）上。标记了Performance.mark()事件。7.网络面板增加资源类型和url过滤条件。现在您可以使用Network面板中的resource-type和url关键字来过滤网络请求。例如，使用resource-type:image过滤掉对图片的网络请求。点击更多过滤条件可以查看更多类似于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。地址送达报告。如何开启COEP和COOP让你的网站跨域隔离，可以查看这篇文章对应Chromium问题：10514668.2Showingthereport-onlymodeofCOEPandCOOPDevtoolsisreport-onlyforCOEPandCOOPCircumstances,addedmarkers显示观看此视频以了解如何防止信息泄露，以及如何启用COOP和COEP。对应于Chromium问题：10514669。删除更多工具菜单中的设置按钮。更多工具菜单中的设置已弃用，请从主面板打开设置。对应Chromiumissue：112131210实验性功能以下功能需要在Settings>Experiments下开启相关选项10.1支持在CSSOverview面板查看和修复颜色对比度问题CSSOverview面板显示页面中低颜色对比度文本的颜色列表.此演示页面显示了低颜色对比度的负面案例。打开CSSOverview面板以查看所有有问题的元素的列表。单击列表中的一个元素会在元素面板中打开该元素，DevTools将提供自动颜色建议以帮助修复文本的低颜色对比度问题。对应Chromiumissue:112031610.2DevTools支持自定义快捷键现在你可以在DevTools中自定义快捷键了。转到设置>快捷方式，将鼠标悬停在命令上，然后单击编辑按钮以自定义快捷方式。要重置所有快捷方式，请单击恢复默认快捷方式以恢复默认快捷方式。对应Chromiumissue:174309作者其他高赞文章：JS提升幸福感技巧VueNginx使用技巧从入门到实践，10000字详解！半小时熟悉CentOS入门必备的基础知识。动手实践Webpack多入口配置，实践前端路由和跳转的基本原理。一起努力吧~
