编注： 新特性都是先在 Chrome 的 Canary、Beta 通道中发布的，要想第一时间体验新特性，请下载 Canary 或 Beta 通道版本的 Chrome。本文中的所有链接都需要自备梯子。
新特性一：增加了对 Trusted Type 调试的支持
1. Sources 面板中新增断点类型—— Trusted Type Violations
Trusted Type 是 W3C 不久前新制定的用来防止基于 DOM 的跨站脚本攻击 (DOM-based XSS) 的规范, Chrome 在 83 版本中就已经实现了这个规范, 为了便于调试，这次版本的 Chrome 开发这工具在 Sources 调试面板中新增了一类断点——Trust Type Violations（见下图） 。当勾选了途中的断点类型后，如果出现违反 Trusted Type 约束的情况，或者 Trusted Type 中定义的 Policy 实现代码报错，调试试就会暂停在出现异常的位置。
扩展阅读
[1] Trusted Types
[2] web.dev/trusted-typ…
2. 在违反了 Trusted Type 的地方，Sources 面板现在会展示一个警告图标，光标悬浮其上可以预览其警告内容，点击后还可以查看其警告详情。
新特性二：元素截图开始包含 Viewport 以外的部分
元素截图截图功能早就存在了，但一直存在一个问题：假如元素的幅面大于 Viewport（意味着元素有一部分显示在 Viewport 外），截图功能无法截到超出 Viewport 的部分。这次 Chrome 完善了这个功能，截图功能开始支持截取整个元素的实际内容。
新特性三： 网络请求详情中新增 Trust Tokens 标签
Trust Token 是一项用于防范身份欺诈、鉴别人类与机器的 API 规范。针对这个新的规范，Chrome 开发者工具在这次的版本中新增了一个 Trust Tokens 标签(只有在请求是 Trust Type 相关的情况下才会出现），以便于查看具体的请求参数和响应。后续的版本中还会有更多关于 Trust Token 的特新。
扩展阅读
[1] get started with Trust Tokens
新特性四： Lighthouse 版本更新到了 7
新版本功能点：
- 新增报告项： LCP 元素中使用的 image 是否属于预加载图片
- 如果图片属于 LCP 元素内容，使用预加载可以提高 LCP 指标
- 所有问题项（Issues）全部归纳进了 Issues 面板
- PWA 目录做了重大变动
- Installable 目录完全改为由 Chrome 的 installable 条件来驱动
扩展阅读
[1] Lighthouse 7 Release Notes
新特性五： Element 面板相关的变动
1. Styles 面板中新增 :target 强制状态项
:target 是近期新增的一个 CSS 伪类，它表示的是元素作为 URL hash 中指定的文本片段时的样式（Google 搜索和 Chrome 已经支持文本片段高亮）
2. 新增元素复制快捷方式和快捷键
右键所要复制的元素，然后点击 Duplicate Element 即可复制一份在其下方。另外还有相应的快捷键，Mac: shift + option + down , Windows/Linux: shift + alt + down
3. CSS 自定义属性中的颜色值也支持颜色选择器
4. CSS 块和 CSS 属性支持右键菜单快捷复制
如图
新特性六：Cookies 面板相关的更新
1. Cookie 支持查看 URL 解码后的值
2. Cookies 面板中的“清除全部” 按钮含义改为清除全部筛选过后的 Cookie
3. 支持清除第三方 Cookie
本次版本之前，Storage 面板中的 “Clear Site Data” 按钮清除的是当前站点下的 Cookie，但当前页面上也可能有引用第三方资源（如图片、脚本），这些资源同样会有关联的 Cookie，本次版本在这个按钮旁边新增了一个选项，勾选之后清除的就是所有的 Cookie （包括第三方资源的关联的 Cookie）
新特性七：支持设置 Client Hints 请求头
新特性八：Network 面板相关的更新
1. “录制网络请求” 选项不会再被重制
2. 支持查看 WebTransport 连接
WebTransport 是新出的一项规范，它提供了一种低延迟、全双工的客户端-服务器消息机制。
关于 WebTransport 的使用场景可以查看 web.dev/webtranspor….
3. 网络条件选项中的 “online” 改名为了 “ No throttling（不限制）”
新特性九：新增两种快捷复制
1. 复制 JS 对象
2. 复制文件名
新特性十：Frame 详情面板相关的更新
1. 新的 Service Worker 信息查看视图
2. 新增 performance.measureMemory() API 可用性信息
新特性十一：Performance 面板中 Frame 时间线上将 丢弃的 Frame 标记为红色
光标悬浮在红色的 Frame 上可查看该 Frame 的帧率
新特性十二：模拟可折叠屏和双屏设备
除此之外，还新增了启用试验性特性选项（下图中的容器图标），勾选后，可以测试 screen-spanning 媒体查询和 getWindowSegemnts() API（此两项特性需要前往 chrome://flags 页面开启后方可生效）
实验性特性
1. Puppeteer Recorder 自动化测试
需要前往 Settings > Experiments 中勾选 Recorder。另外，目前这个功能还在实验阶段，后续版本会更加完善。这次版本的开发者工具开始支持生成 Puppeteer 脚本（录制你与你浏览器的交互），以此 提供一种浏览器自动化测试工具。以这个 Dome 页面为例，步骤如下：
- 前往 dome 页面 jec.fyi/demo/record…
- 打开 Sources 面板，并将左侧区域切换至 Recording 标签
- 点击 Add Recording ，输入脚本文件名称，点击下方的 Record 按钮开始录制
- 尝试填写页面上的表单
- 再次点击 Record 按钮完成录制
扩展阅读
[1] Puppeteer
[2] DevTools Protocol
[3] Puppeteer Getting started guide
2. 新增字体属性编辑对话框
需要前往 Settings > Experiments 中勾选 Enable new Font Editor tools within Styles pane
3. 新增 Flex 布局调试工具
需要前往 Settings > Experiments 中勾选 Enable CSS Flexbox debugging features
4. 新增 CSP Violations 标签
需要前往 Settings > Experiments 中勾选 Show CSP Violations view
5. 新的色彩对比度模型 —— Advanced Perceptual Contrast Algorithm (APCA)
我将其称为“高级观感对比度算法”。需要前往 Settings > Experiments 中勾选 Enable new Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines 这个新的模型将替换原来的 AA/AAA 模型。APCA 是一种基于色彩感知研究前沿理论的对比度角色模型，相比于 AA/AAA 模型，APCA 考虑了更多的环境因素，如文本的空间属性（大小和粗细）、背景和文本色彩对比、环境光等。
往期文档
1. Chrome 88 开发者工具新特性
share.mubu.com/doc/1R_QN0Q…
2. Chrome 89 新特性
暂未写作完成，待补充文章链接
3. Chrome 更新日志目录
mubu.com/doc/AObcWUR…
其他说明
参考文档：
[1] What's New In DevTools (Chrome 89) developers.google.com/web/updates…
幕布平台：share.mubu.com/doc/3vOaXg9…
作者：西楼听雨（微信名 t.t.）
联系 & 交流 & 聘用
