参考源: What's New In DevTools (Chrome 96)
developer.chrome.com/en/blog/new…
编注：新特性都是先在 Chrome 的 Canary 通道中发布的，要想体验本文提到的新特性，请下载 Canary 通道版本的 Chrome。本文中的所有链接都需要自备梯子。
新特性一：新增 CSS Overview 面板
这次新增的 CSS Overview 面板，主要用来汇总分类地列出页面的外观和样式问题列表，便于我们集中查看和处理外观问题。
使用方法：如下图，在开发者工具中找到该面板打开，然后点击“Capture Overview”按钮即可
汇总后的结果如下图，点击每一项可以查看问题详情
提示： 现有版本的一些特性
当光标放在长度值上时，光标会变成一个水平的双向箭头，按住左右拖动可以很方便的调整长度值
新特性二：Rendering 面板相关的新增项
1. 新增媒体查询模拟项 perfers-constrast
该媒体查询项主要用来查询用户所选择的操作系统色彩对比程度（不是显示器的色彩对比度），比如高对比度(more)，一般对比度(less)，如下图
选中不同的模拟值，可以很方便地调试我们 CSS 中符合此媒体查询条件的样式
2. 新增模拟项：自动深色主题(auto-dark-theme)
自动深色主题是 Chrome 所提供的一项功能，并不是媒体查询项；当用户操作系统当前为深色主题(有时也叫暗色主题）时，Chrome 会为开启了自动深色主题选项（浏览器选项）的用户自动将不支持深色主题的页面（未适配 perfers-color-scheme: dark 媒体查询的页面) 强制转换为深色主题。但这种转换可能并不能很好的展示你的网络，通过这个模拟项，可以测试你的网站在这种情况下的展示。
关于自动深色主题的文章可以查看这篇文章
新特性三：样式面板更好地支持 CSS-in-JS
继支持在样式面板直接编辑 CSS-in-JS 构建的样式后，这次又有了一个小改进：支持将 CSS 规则复制为 CSS-in-JS 更友好的格式。比如： font-size: 14px，可以直接复制为 fontSize: "14px"。如下图，在要复制的属性上右键，即可看到新增的菜单项（Copy declaration as JS 和 Copy all declarations as JS)：
新特性四：网络面板新增 Payload 标签
以前要查看请求的参数只能在 Headers 标签下查看，现在新增了一个单独 Payload 面板用来查看，如下图：
新特性五： Properties 小面板的显示进一步提升
在上一版的更新中，Properties 小面板将 DOM 属性扁平化了（所有原型链上的属性都一起展示出来），我还评论了说这是一种倒退。这次，Properties 小面板将只显示当前 Node 的属性，原型链上的属性将被移除，如下图：
新特性六：Console 相关的更新
1. 新增隐藏 CORS 错误的选项，如下图：
2. Intl 对象的打印更友好
在这之前在 Console 中打印 Intl 对象，输出的信息中，并不会有相关属性的预览值，这次加上了：
3. 统一 async 函数报错时的调用栈信息展示
在之前的版本，这类信息时常会出现不一致的情况，这次进行了统一
4. 侧边栏继续保留
在之前的版本更新日志中，曾想开发者声明打算移除侧边栏，后来经过反馈得知大家希望保留，所以先不移除了，并且会在后续版本中继续优化该侧边栏：
往期文档
Chrome 95 开发者工具新特性
www.mubucm.com/doc/Vzxg5Od…
Chrome 更新日志目录
mubu.com/doc/AObcWUR…
本文同时发布与于
幕布平台：www.mubucm.com/doc/UofVw7v…
掘金平台：juejin.cn/post/702997…
作者：西楼听雨（微信名 t.t.）
