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
网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，如果本文帮助到了你，别忘了点赞支持一下哦，你的点赞是我更新的最大动力！（收藏不点赞，都是耍流氓 🤣）~
参考文档：
