关于chrome:Chrome-89-新功能一览性能提升明显大量-DevTools-新特性

明天 Chrome 更新了最新版本 Chrome89，新版本在启动、响应速度上更快，同时 CPU 占用率大幅降落。

比方，提供后退后退缓存（20% 的页面可刹时进退）等个性，号称启动速度快了 25%、载入页面速度快了 7%、CPU 占用缩小了 5 倍、可减少额定 1.25 小时续航，内存占用量也优化了。

原文：https://developers.google.com…

上面来具体看看更新了哪些内容。

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 面板中复制文件名的新选项

你当初能够通过右键点击复制文件名：

1. 在 Sources 面板的文件名
2. 在 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

8. Cookies 相干更新

显示 url 解码后的 cookie 的新选项

当初，能够在 Cookies 窗格中查看 url 解码后的 cookie 值。

转到 Application 面板并抉择左侧的 Cookies 选项。抉择列表中的任何 cookie。启用新的 Show URL decoded 复选框能够查看解码后的 cookie。

对应 Chromium issue: 997625

只革除过滤后的 cookie

Cookies 选项窗格中的 Clear all cookies 按钮当初被 Clear filtered cookies 按钮取代。

在 Application > Cookies 窗格中，在文本框中输出文本以过滤 cookie。下图咱们应用 PREF 过滤列表。单击 Clear filtered cookies 按钮删除可见的 cookie。革除过滤文本后，你将看到其余 cookie 依然保留在列表中。以前，你只能抉择革除所有 cookie。

对应 Chromium issue: 978059

革除 Storage 窗格中第三方 cookies 的新选项

当革除 Storage 窗格中的站点数据时，DevTools 当初默认状况下只革除本站 cookie。选中 including third-party cookies 复选框后，浏览器也会革除第三方 cookies。

对应 Chromium issue: 1012337

9. 为自定义设施编辑 User-Agent Client Hints

当初能够编辑自定义设施的 User-Agent Client Hints。

进入 Settings > Devices，而后点击 Add custom device。开展 User agent client hints 局部来编辑客户端提醒。

User-Agent Client Hints 是字符串模式 User-Agent 的代替，它使得开发人员能够以更符合人体工程学的形式拜访 User-Agent 的信息，并且有利于爱护用户隐衷。

对应 Chromium issue: 1073909

10. Frames 面板更新

在 Frames 面板中的 Service Workers 信息

DevTools 当初独立显示 Service Workers 信息。

在 Application 面板中，在 Service Workers 选项中抉择一个 Service Worker 以查看详细信息。

对应 Chromium issue: 1122507

Frames 面板中显示内存统计信息

新的 performance.measureMemory() API 可用状态当初显示在 API availability 选项下。

performance.measureMemory() API 能够统计以后整个网页的内存使用量，能够在这篇文章中学习应用这个 API 的应用。

对应 Chromium issue: 1139899

11. 在 Issues 标签中提供反馈

如果你想改善一个问题的音讯，转到 Console > Issues 标签，或者 More Settings > More tools > Issues 来关上 Issues 标签。开展一个 Issues 音讯，并单击 Is the issue message helpful to you?，而后你能够在弹出窗口中提供反馈。

12. Performance 面板的掉帧提醒

在 Performance 面板中剖析加载性能时，Frames 当初将掉帧局部标记为红色。将鼠标悬停在下面，能够看到帧速率。

对应 Chromium issue: 1075865

13. 在设施模式下模仿双屏和可折叠屏幕

当初能够在 DevTools 中模仿双屏幕和可折叠设施。

在启用设施模式后，抉择 Surface Duo 或三星 Galaxy Fold 其中一个设施。

单击新的 span 图标能够在单屏幕或折叠屏幕与双屏幕或折叠式体式之间切换。

启用 Web Platform 试验个性后，能够应用 CSS 的 screen-spanning 个性和 JavaScript 的 getWindowSegments API。左边的试验小图标显示了 Experimental Web Platform features 开关状态，如果图标高亮则示意开关已被关上。在浏览器中拜访 chrome://flags 能够切换这个开关。

对应 Chromium issue: 1054281

14. 实验性新个性

应用 Puppeteer Recorder 自动化浏览器测试

要启用该实验性新个性，请选中 Settings > Experiments 下的 Recorder 复选框

当初，DevTools 能够基于你与浏览器的交互来生成 Puppeteer 脚本，便于你进行自动化浏览器测试。Puppeteer 是一个 Node.js 库，它提供了一个高级 API 来通过 DevTools 协定管制 Chrome 或 Chromium。

进入这个演示页面，在 DevTools 中关上 Sources 面板，抉择左上的 Recording 选项卡，增加一个新的记录并命名（例如 test01.js）。

点击底部的 Record 按钮开始记录交互，试着填写屏幕上的表格。能够看到 Puppeteer 命令被相应地附加到文件中。再次点击 Record 按钮进行录制。

要运行该脚本，请遵循 Puppeteer 官网的指南。

请留神，这是一个晚期阶段的试验个性，当前这个性能可能会有所变更。

对应 Chromium issue: 1144127

Styles 面板中的字体编辑器

要启用该实验性新个性，请选中 Settings > Experiments 下的 Enable new Font Editor tools within Styles pane 复选框

Styles 面板中新的字体编辑器是一个字体相干的属性编辑性能，以帮忙开发者为网页找到更适合的排版。

弹出窗口提供了一个简洁的用户界面，能够应用一系列直观的输出动静地操作字体。

对应 Chromium issue: 1093229

CSS flexbox 调试工具

要启用该实验性新个性，请选中 Settings > Experiments 下的 Enable CSS Flexbox debugging features 复选框

从上次公布以来，DevTools 减少了对 flexbox 调试的反对。

DevTools 当初绘制了一条领导线，更好地可视化 align-items 属性。同时也更好的反对了 gap 属性。在这里的例子中，设置了 gap: 12px; , 留神下图缝隙的暗影图案。

对应 Chromium issue: 1139949

新的 CSP Violations 标签

要启用该实验性新个性，请选中 Settings > Experiments 下的 Show CSP Violations view 复选框

在新的 CSP Violations 标签中查看所有内容安全策略（CSP）违规。这个新标签是一个实验性个性，用来不便的解决存在大量 CSP 与可信类型报错的页面。

对应 Chromium issue: 1137837

新的色彩对比度算法 - 先进感知对比度算法(APCA)

要启用该实验性新个性，请选中 Settings > Experiments 下的 Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines 复选框

先进感知对比度算法（APCA）正在取代色彩选择器中的 AA/AAA 对比度提醒。

APCA 是在古代色觉钻研的根底上倒退起来的一种新的计算对比度的办法。与 AA/AAA 相比，APCA 更依赖于上下文。对比度是依据文本的空间属性（字体分量和大小）、色彩（文本和背景之间可感知的明度差）和上下文（环境光线、环境、文本的预期目标）来计算的。

对应 Chromium issue: 1121900

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢送留言指出，如果本文帮忙到了你，别忘了点赞反对一下哦，你的点赞是我更新的最大能源！（珍藏不点赞，都是耍流氓 ????）~

参考文档：

1. What’s New In DevTools (Chrome 89) | Web | Google Developers

PS：本文收录在在下的博客 Github – SHERlocked93/blog 系列文章中，欢送大家关注我的公众号 前端下午茶，间接搜寻即可增加或者点这里增加，继续为大家推送前端以及前端周边相干优质技术文，共同进步，一起加油~

另外能够退出「前端下午茶交换群」微信群，微信搜寻 qianyu443033099 加我好友，备注 加群，我拉你入群～