2021 Chrome Devtools 新特性

查看当前浏览器版本的方法：谷歌浏览器 --> 帮助 --> 关于Google Chrome

基础教程

可参考如下

1. Chrome DevTools
2. Chrome 开发者工具中文文档
3. Chrome DevTools中文手册

新特性哪里来的

新特性的来源一般为用户提供的bug，可在这里查看crbug.com

Chrome 96

• 最新版，尚未测试

Chrome 95

1. CSS的长度单位可直接更换

Chrome 94

1. 支持更换80种语言

2. 设备列表新增Nest Hub 设备

Nest Hub：智能家用设备
您现在可以在设备模式下模拟 Nest Hub 和 Nest Hub Max 的尺寸。
单击切换设备工具栏 切换设备工具栏 ，在设备列表下选择 Nest Hub 或 Nest Hub Max。

3. 新增过滤器反选

使用后，可选择所有的、不包含过滤器的请求

Chrome 93

1. 控制台中更好的字符串处理

控制台中的新上下文菜单允许您将任何字符串复制为内容、JavaScript 文字或 JSON 文字。

2. 改进的 CORS 调试

单击与 CORS 相关的错误消息旁边的两个新图标以查看网络请求，或进一步了解错误消息并在“问题”选项卡中获取潜在解决方案。

3. JSON响应格式化

Chrome 92

1. CSS 网格编辑器

当页面上的 HTML 元素已经display: grid或display: inline-grid应用到它时，选择对应的选想，自动添加对应的属性

2. 支持const在控制台中重新声明

3. Network面板更新

(1). 将 XHR 标签重命名为 Fetch/XHR

(3). 在网络面板中过滤 Wasm 资源类型

Chrome 91

1. 可视化 CSS 滚动快照

您现在可以scroll-snap在“元素”面板中切换徽章以检查 CSS 滚动对齐对齐方式。

2. 具有纵横比信息的增强图像预览

3. 增强了对断点调试的支持

以前，DevTools 只能在一个原始位置设置断点。通过这项最新改进，DevTools 可以在所有相关位置正确设置断点。

4. 支持带[]符号的悬停预览

DevTools 现在支持在使用Sources面板中的[]符号的JavaScript 成员表达式上悬停预览。

Chrome 90

1. 新的 CSS flexbox 调试工具

当页面上的 HTML 元素已经display: flex或display: inline-flex应用到它时

2. 在控制台中将字符串格式化为（有效）JavaScript 字符串文字

3. 模拟 CSS 色域媒体功能

您可以测试由浏览器和输出设备支持的颜色大致范围。例如，如果color-gamut: p3媒体查询匹配，则表示用户的设备支持 Display-P3 色彩空间。
通过ctrl+shift+p–>键入Rendering调出