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




相关文章
|
1月前
|
Web App开发 前端开发 JavaScript
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
46 0
控制台出现报错DevTools failed to load source map: Could not load content for chrome-extension://的原因及解决方案
|
3月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
6月前
|
Web App开发
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?
63 0
|
8月前
|
Web App开发 前端开发 JavaScript
DevTools failed to load SourceMap Could not load content for chrome-extension 解决
DevTools failed to load SourceMap Could not load content for chrome-extension 解决
130 0
|
Web App开发 传感器 JavaScript
20 条 Chrome DevTools 使用建议,盲猜这几个你不知道~
Web 开发,每天都和 Chrome DevTools 打交道,即使是摸鱼冲浪,也会习惯性的 Ctrl+Shift+C 打开控制台看看~ 本篇带来 20 条 Chrome DevTools 使用建议,让你看起来更专业、更 Dope ~(●'◡'●) ~
|
Web App开发 前端开发
项目chrome安装react devtools
下载网站地址 Download React Developer Tools 4.24.0 CRX File for Chrome - Crx4Chrome 下载好以后,按照下面的操作 After you download the crx file for React Developer Tools 4.24.0, open Chrome's extensions page (chrome://extensions/ or find by Chrome menu icon > More tools > Extensions), and then drag-and-drop the *.crx f
89 0
项目chrome安装react devtools
|
Web App开发 存储 JSON
Chrome DevTools功能介绍
Chrome DevTools功能介绍
104 0
|
Web App开发 存储 JSON
Chrome DevTools功能介绍
Chrome DevTools功能介绍
108 0
|
Web App开发 JavaScript 前端开发
如何使用Chrome DevTools花式打断点
如何使用Chrome DevTools花式打断点
如何使用Chrome DevTools花式打断点
|
Web App开发 前端开发 JavaScript
你可能不知道的 Chrome Devtools 实用功能
今天来分享 Chrome DevTools 的10个实用调试功能!
242 0