Chrome 89 新功能一览,性能提升明显,大量 DevTools 新特性(上)

简介: 今天 Chrome 更新了最新版本 Chrome89,新版本在启动、响应速度上更快,同时 CPU 占用率大幅下降。比如,提供前进后退缓存(20%的页面可瞬时进退)等特性,号称启动速度快了 25%、载入页面速度快了 7%、CPU 占用减少了 5 倍、可增加额外 1.25 小时续航,内存占用量也优化了。

今天 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。


微信截图_20220427230915.png


对应 Chromium issue: 1156628


复制 DOM 元素的新选项

右键单击元素面板中的一个元素,选择 Duplicate element,将在其下面快速创建一个新元素。


或者,你可以使用键盘快捷键复制元素:


  • Mac: Shift + Option + ⬇️
  • Window/ Linux: Shift + Alt + ⬇️


微信截图_20220427230920.png


对应 Chromium issue: 1150797, 1150797


自定义 CSS 属性的颜色选择器


在 Elements 面板的 Styles 窗格现在可以显示自定义 CSS 属性的颜色选择器。

此外,按住 Shift 键并单击颜色选择器,可以切换颜色值的 RGBA、 HSLA 和 Hex 表示。


微信截图_20220427230925.png


对应 Chromium issue: 1147016


复制 CSS 属性的新选项


你现在可以用新的快捷方式更快地复制 CSS 属性。


在 Elements 面板中,选择一个元素。然后,在 Styles 窗格中右键单击 CSS 类或 CSS 属性以复制该值。


微信截图_20220427230929.png


类的复制选项:


  • Copy selector:复制当前选择器名称;
  • Copy rule:复制当前选择器的规则;
  • Copy all declarations:复制当前规则下的所有声明,包括无效属性和带前缀的属性。


属性的复制选项:


  • Copy declaration:复制当前行的声明;
  • Copy property:复制当前行的属性;
  • Copy value:复制当前行的值。


对应 Chromium issue: 1152391


2. Network 面板相关升级


保持记录网络日志


DevTools 现在始终保持记录网络日志(Record network log)设置。以前,每当页面重新加载时,DevTools 都会重置用户的选择。


微信截图_20220427230934.png


对应 Chromium issue: 1122580


在 Network 面板中查看 WebTransport 连接


网络面板现在显示 WebTransport 连接。


微信截图_20220427230938.png


WebTransport 是一个新的 API,可以提供低延迟的客户端与服务端的双向消息传递。

对应 Chromium issue: 1152290


“Online” 改为 “No throttling”


网络模拟选项 Online 现在被重命名为 No Throttling。


微信截图_20220427230942.png


对应 Chromium issue: 1028078


3. Console、Sources、Styles 面板中新的复制选项


Console、Sources 面板中复制对象的新选项


现在可以使用 Console 和 Sources 面板中的新选项来快捷复制对象值。这非常方便,尤其是当需要复制一个比较大的对象(例如一个长数组)时。


微信截图_20220427230947.png


微信截图_20220427230951.png


对应 Chromium issues: 1149859, 1148353


Sources、Styles 面板中复制文件名的新选项


你现在可以通过右键点击复制文件名:


  1. 在 Sources 面板的文件名
  2. 在 Elements 面板中的 Styles 标签的文件名


从上下文菜单中选择 Copy file name 以复制文件名。


微信截图_20220427230955.png


微信截图_20220427230959.png


对应 Chromium issue: 1155120


4. 对可信类型(Trusted Types)的调试支持


可信类型断点


现在可以在 Source 面板中设置断点和捕获可信类型违规的异常。


可信类型(Trusted Types) API 有助于防止基于 DOM 的跨站脚本攻击(XSS)。点击这里了解如何使用可信类型来避免 XSS 攻击。


你可以自己试试这个演示页面中尝试一下,在 Sources 面板中,打开右侧调试器。展开 CSP Violation Breakpoints 部分,并启用 Trusted Type violations 复选框来在异常发生时暂停 script 运行。


微信截图_20220427231005.png


对应 Chromium issue: 1142804


在 Issues 选项卡中链接 Sources 面板中的提示框


现在,Sources 面板在违反 Trusted Type 的代码行旁边显示了一个警告图标,将鼠标悬停在这个图标上时可以预览异常。单击它展开 Issues 选项卡,选项卡提供了关于异常的更多细节,以及如何修复异常的提示。


微信截图_20220427231010.png


对应 Chromium issue: 1150883


5. 支持超出视口的元素截图


现在可以捕获一个包括视口外的内容完整的节点屏幕截图。在此之前,屏幕截图因为无法截取视口外的内容而得不到完整的截图。


整个浏览器页面的截图现在也可以得到同样的完整截图。


在 Element 面板中,右键单击一个 DOM 元素并选择 Capture node screenshot 可以使用元素截图功能。


微信截图_20220427231018.png


对应 Chromium issue: 1003629


6. Network 面板中新增的 Trust Tokens 选项卡


使用新的 Trust Tokens 选项卡检查网络请求的可信类型。


Trust Token 是一个新的 API,可以在不需要被动跟踪帮助打击网络诈骗、区分机器人和真人。


进一步的调试支持将在 Chrome 下一个版本中提供。


微信截图_20220427231027.png


对应 Chromium issue: 1126824


7. Lighthouse 面板升级到 Lighthouse7


Lighthouse 现在升级到了 Lighthouse7,点击这里了解具体变更明细。


微信截图_20220427231031.png


对应 Chromium issue: 772558




相关文章
|
2月前
|
Web App开发 前端开发 JavaScript
介绍Chrome DevTools的使用方法,助您更好地掌握这款工具
【6月更文挑战第14天】Chrome DevTools是Chrome内置的网页调试利器,提供Elements(编辑HTML/CSS)、Console(JavaScript调试)、Sources(查看/调试JS/CSS文件)、Network(分析网络请求)和Performance(性能瓶颈分析)等面板,助力开发者优化网页性能和用户体验。通过掌握其使用,可提升开发效率。
37 2
|
1月前
|
Web App开发 缓存 监控
如何使用 Chrome DevTools 的 Performance 面板进行页面加载性能分析?
如何使用 Chrome DevTools 的 Performance 面板进行页面加载性能分析?
|
4天前
|
Web App开发 JavaScript 前端开发
Electron V8排查问题之Chrome DevTools 的 Performance 工具的使用如何解决
Electron V8排查问题之Chrome DevTools 的 Performance 工具的使用如何解决
9 0
|
4天前
|
Web App开发 JavaScript 前端开发
Electron V8排查问题之Chrome DevTools的Memory工具的使用如何解决
Electron V8排查问题之Chrome DevTools的Memory工具的使用如何解决
10 0
|
8天前
|
Web App开发 资源调度 JavaScript
Chrome 安装 Vue Devtools 调试工具
Chrome 安装 Vue Devtools 调试工具
10 0
|
1月前
|
Web App开发 安全 前端开发
Chrome DevTools攻略
Chrome DevTools攻略
|
1月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
1月前
|
Web App开发 缓存 监控
如何使用 Chrome DevTools 进行网页性能优化?
如何使用 Chrome DevTools 进行网页性能优化?
|
3月前
|
Web App开发 前端开发 JavaScript
【专栏:工具与技巧篇】网页调试工具(Chrome DevTools)的使用
【4月更文挑战第30天】Chrome DevTools是谷歌浏览器内置的网页调试利器,提供Elements(查看编辑HTML/CSS)、Console(JavaScript调试)、Sources(JS/CSS文件调试)、Network(网络请求分析)和Performance(性能瓶颈排查)等面板。通过掌握这些功能,开发者能有效优化网页性能和用户体验。本文详细介绍了各面板的使用方法,助力开发者高效工作。
279 1
|
3月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
217 1

热门文章

最新文章