共计 3031 个字符,预计需要花费 8 分钟才能阅读完成。
明天 Chrome 更新了 87 最新版,这是往年最初一次 Chrome 更新了,这个版本是多年来 Chrome 性能取得最大晋升的一次,开发者工具也进行了大幅度更新。
有用户认为,本来 Chrome 的性能问题诟病已久,然而在新 Edge 进去了当前,性能忽然就晋升了,这显然是谷歌方面受到了 Edge 市场份额暴增带来的压力。
另外,在 Mac 上的 Chrome 还更新了图标,这应该是为了适配 Big Sur 专门进行的设计。
原文:https://developers.google.com…
PS:最新的 Chrome 更新视频是一个日裔女的讲解,这英语口语真是醉了 …
1. 新的 CSS Grid 调试工具
当初 DevTools 对 CSS 的 Grid 有了更好的反对。
当页面上的 HTML 元素具备 display: grid
或 display: inline-grid
时,能够在 Elements 面板中看到它旁边的一个 Grid 标记。单击标记能够切换页面上 Grid 笼罩的高亮显示。
新的 Layout 子面板有一个 Grid 标签,提供了查看 Grid 的一些选项。
查看文档以理解更多信息。
对应 Chromium issue: 1047356
2. 新的 WebAuthn 面板
当初,能够模仿身份验证器并应用新的 WebAuthn 选项卡调试 Web 身份验证 API。
如图抉择 More options > More tools > WebAuthn 能够关上 WebAuthn 面板。
在 WebAuthn 标签呈现之前,Chrome 上不反对原生的 WebAuthn 调试。开发人员须要物理身份验证器来测试他们的 Web 应用程序。
有了新的 WebAuthn 标签,Web 开发人员当初能够模仿认证器,定制它们的性能,并查看它们的状态,而不须要任何物理认证器。这使得调试体验更加容易。
查看咱们的文档理解更多对于 WebAuthn 个性的信息。
对应 Chromium issue: 1034663
3. 开发者工具的面板当初反对垂直分屏
DevTools 当初反对将 DevTools 工具面板挪动到顶部和底部,通过这种形式,能够同时分屏查看任意两个工具面板。
例如,如果想同时查看 Elements 和 Sources 面板,能够右键单击 Sources 面板,并抉择挪动到底部。
相似地,能够将任何底部选项卡挪动到顶部,办法是右键单击选项卡并抉择 Move to top。
4. Elements 面板性能更新
4.1 在 Styles 子面板中查看 Computed 侧边栏
当初能够切换 Styles 面板中的 Computed 侧边栏。
默认状况下,Styles 面板中的 Computed 侧边栏是折叠的,单击按钮能够切换开展状态。
对应 Chromium issue: 1073899
4.2 在 Computed 面板中对 CSS 属性进行分组
当初能够在 Computed 侧边栏中按类别对 CSS 属性进行分组。
有了这个新的分组个性,在 Computed 中查找和选择性地关注一组相干 CSS 属性变得更加容易。
在 Elements 面板上,抉择一个元素,单击 Group 复选框,能够对 CSS 属性进行分组 / 勾销分组。
对应 Chromium issues: 1096230, 1084673, 1106251
5. Lighthouse 更新 Lighthouse 6.4
Lighthouse 面板当初更新到了 Lighthouse 6.4,查看 release notes 能够看到残缺的新个性清单。
Lighthouse 6.4 中的新个性:
- Preload fonts:报告是否所有应用了 font-display: optional 的字体文件是否都有预加载成
- Valid sourcemaps:报告页面上非第三方 JS 的 sourcemap 文件是否正确
- Large JavaScript library(实验性个性):报告页面上的大型 JS 库(比方:moment.js)
对应 Chromium issue: 772558
6. 在 Performance 面板中的事件线(Timings)上将标记出 performance.mark() 事件
Performance 面板记录的 Timing 局部当初会标记 Performance.mark()
事件。
7. Network 面板新增 resource-type、url 筛选条件
当初能够应用 Network 面板中的 resource-type
和 url
关键字筛选网络申请。
例如,应用 resource-type: image
能够筛选出申请图像的网络申请。
点击更多的筛选条件,能够查看到更多相似于 resource-type
和 url
的筛选用法。
对应 Chromium issues: 1121141, 1104188
8. Application 面板中 Frames 子面板相干的更新
8.1 反对展现 COEP
和 COOP
的向谁报告字段
当初能够在 Application 面板的 Frames 子面板的 Security & Isolation 局部查看向终端报告的 COEP
(Cross-Origin Embedder Policy)和 COOP
(Cross-Origin Opener Policy)。
Reporting Api 定义了一个叫做 Report-To 的新的 HTTP Header,当网站中呈现违反 COEP
(Cross-Origin Embedder Policy)和 COOP
(Cross-Origin Opener Policy)的状况时,浏览器会向这个头部指定的地址发送报告。
对于如何开启 COEP
和 COOP
来使你的网站实现跨源隔离(cross-origin isolated)能够查看这篇文章
对应 Chromium issue: 1051466
8.2 展现 COEP 和 COOP 的 report-only 模式
Devtools 对于 COEP、COOP 为 report-only 的状况,新增了标记展现
观看这个视频,学习如何避免信息透露,以及如何开启 COOP 和 COEP。
对应 Chromium issue: 1051466
9. 移除 More tools 菜单中的 Setting 按钮
More tools 菜单中的 Setting 已不举荐应用,请从主面板关上 Setting。
对应 Chromium issue: 1121312
10. 试验个性
以下个性均须要开启 Settings > Experiments 下的相干选项
10.1 CSS Overview 面板中反对查看、修复色调对比度问题
CSS Overview 面板展现了你的页面中低色调比照文本的色调列表。
这个 Demo 页面展现了一个低色调对比度的背面案例,关上这个 CSS Overview 面板能够查看到所有有问题的元素列表。
单击列表中的某个元素能够关上 Elements 面板中的元素,DevTools 将提供主动色彩倡议,帮忙修复文本的低色调对比度问题。
对应 Chromium issue: 1120316
10.2 DevTools 反对自定义键盘快捷键了
当初能够在 DevTools 中自定义键盘快捷键。
进入 Settings > Shortcuts,将鼠标悬停在一个命令上,点击编辑按钮来自定义快捷键。
要重置所有快捷方式,请单击 Restore default shortcuts 还原默认快捷键。
对应 Chromium issue: 174309
作者其余高赞文章:
- JS 中能够晋升幸福度的小技巧
- Vue 应用中的小技巧
- Nginx 从入门到实际,万字详解!
- 半小时搞会 CentOS 入门必备基础知识
- 手摸手 Webpack 多入口配置实际
- 前端路由跳转基本原理
PS:自己博客地址 Github \- SHERlocked93/blog,也欢送大家关注我的公众号【前端下午茶】,一起加油吧~