今天 Chrome 更新了最新版本 Chrome89,新版本在启动、响应速度上更快,同时 CPU 占用率大幅下降。
比如,提供前进后退缓存(20%的页面可瞬时进退)等特性,号称启动速度快了 25%、载入页面速度快了 7%、CPU 占用减少了 5 倍、可增加额外 1.25 小时续航,内存占用量也优化了。
原文:developers.google.com/web/updates…
下面来具体看看更新了哪些内容。
1. Elements 面板相关更新
支持选择 CSS 的 :target
伪类
现在可以使用 DevTools 选中和检查 :target
状态。
在 Elements 面板中,选择一个元素,可以在右侧切换 :target
。
当 URL 中的 hash 和 DOM 元素的 id 相同时,将触发该元素的 :target
伪类。可以点击这个 Demo 看看效果,这个新的 DevTools 特性可以让你测试这些样式,而不必一直手动更改 URL。
对应 Chromium issue: 1156628
复制 DOM 元素的新选项
右键单击元素面板中的一个元素,选择 Duplicate element,将在其下面快速创建一个新元素。
或者,你可以使用键盘快捷键复制元素:
- Mac:
Shift
+Option
+⬇️
- Window/ Linux:
Shift
+Alt
+⬇️
对应 Chromium issue: 1150797, 1150797
自定义 CSS 属性的颜色选择器
在 Elements 面板的 Styles 窗格现在可以显示自定义 CSS 属性的颜色选择器。
此外,按住 Shift 键并单击颜色选择器,可以切换颜色值的 RGBA、 HSLA 和 Hex 表示。
对应 Chromium issue: 1147016
复制 CSS 属性的新选项
你现在可以用新的快捷方式更快地复制 CSS 属性。
在 Elements 面板中,选择一个元素。然后,在 Styles 窗格中右键单击 CSS 类或 CSS 属性以复制该值。
类的复制选项:
- Copy selector:复制当前选择器名称;
- Copy rule:复制当前选择器的规则;
- Copy all declarations:复制当前规则下的所有声明,包括无效属性和带前缀的属性。
属性的复制选项:
- Copy declaration:复制当前行的声明;
- Copy property:复制当前行的属性;
- Copy value:复制当前行的值。
对应 Chromium issue: 1152391
2. Network 面板相关升级
保持记录网络日志
DevTools 现在始终保持记录网络日志(Record network log)设置。以前,每当页面重新加载时,DevTools 都会重置用户的选择。
对应 Chromium issue: 1122580
在 Network 面板中查看 WebTransport 连接
网络面板现在显示 WebTransport 连接。
WebTransport 是一个新的 API,可以提供低延迟的客户端与服务端的双向消息传递。
对应 Chromium issue: 1152290
“Online” 改为 “No throttling”
网络模拟选项 Online 现在被重命名为 No Throttling。
对应 Chromium issue: 1028078
3. Console、Sources、Styles 面板中新的复制选项
Console、Sources 面板中复制对象的新选项
现在可以使用 Console 和 Sources 面板中的新选项来快捷复制对象值。这非常方便,尤其是当需要复制一个比较大的对象(例如一个长数组)时。
对应 Chromium issues: 1149859, 1148353
Sources、Styles 面板中复制文件名的新选项
你现在可以通过右键点击复制文件名:
- 在 Sources 面板的文件名
- 在 Elements 面板中的 Styles 标签的文件名
从上下文菜单中选择 Copy file name 以复制文件名。
对应 Chromium issue: 1155120
4. 对可信类型(Trusted Types)的调试支持
可信类型断点
现在可以在 Source 面板中设置断点和捕获可信类型违规的异常。
可信类型(Trusted Types) API 有助于防止基于 DOM 的跨站脚本攻击(XSS)。点击这里了解如何使用可信类型来避免 XSS 攻击。
你可以自己试试这个演示页面中尝试一下,在 Sources 面板中,打开右侧调试器。展开 CSP Violation Breakpoints 部分,并启用 Trusted Type violations 复选框来在异常发生时暂停 script 运行。
对应 Chromium issue: 1142804
在 Issues 选项卡中链接 Sources 面板中的提示框
现在,Sources 面板在违反 Trusted Type 的代码行旁边显示了一个警告图标,将鼠标悬停在这个图标上时可以预览异常。单击它展开 Issues 选项卡,选项卡提供了关于异常的更多细节,以及如何修复异常的提示。
对应 Chromium issue: 1150883
5. 支持超出视口的元素截图
现在可以捕获一个包括视口外的内容完整的节点屏幕截图。在此之前,屏幕截图因为无法截取视口外的内容而得不到完整的截图。
整个浏览器页面的截图现在也可以得到同样的完整截图。
在 Element 面板中,右键单击一个 DOM 元素并选择 Capture node screenshot 可以使用元素截图功能。
对应 Chromium issue: 1003629
6. Network 面板中新增的 Trust Tokens 选项卡
使用新的 Trust Tokens 选项卡检查网络请求的可信类型。
Trust Token 是一个新的 API,可以在不需要被动跟踪帮助打击网络诈骗、区分机器人和真人。
进一步的调试支持将在 Chrome 下一个版本中提供。
对应 Chromium issue: 1126824
7. Lighthouse 面板升级到 Lighthouse7
Lighthouse 现在升级到了 Lighthouse7,点击这里了解具体变更明细。
对应 Chromium issue: 772558