developers.google.com/web/updates…（需越墙）
当我们打开开发者工具后，我们经常会碰到 Console 中有许多许多警告和错误消息的情况。这些警告和错误消息跟我们正常打印出来的日志混在一起，显得非常杂乱。为了解决这个问题，Chrome 84 新增了一个 Issues 标签，把这些警告和错误消息集中到了一起，并以一种结构化、分类化的形式进行组织，同时给出了产生这些问题的详细原因、解决这些问题的指导，以及所有受影响的资源或请求。
如下图
- 1. 底部状态栏新增 TBT 指标值展示
- TBT（Total Blocking Time，总阻塞时长）是谷歌正在试验的各项新的性能指标中主要的一项，他可以为更精确计算 FID （First Input Delay，首次交互延迟）指标提供支持。从名称上可以看出，他可以未来测量页面从开始加载到用户可用（即可以对用户的交互做出响应）需要多长的时间。
注意：页面开始有展示或者已经完成展示，并不代表页面已经可以开始交互了，因为可能会有一些JS还未执行完成，正在阻塞主线程。 - 想要获取 TBT 指标，不能使用 Reload Page 来测量，需要点击 Record 按钮，然后手动重载页面，等待页面页面完成再点击停止录制才能获得 TBT 指标。
- TBT（Total Blocking Time，总阻塞时长）是谷歌正在试验的各项新的性能指标中主要的一项，他可以为更精确计算 FID （First Input Delay，首次交互延迟）指标提供支持。从名称上可以看出，他可以未来测量页面从开始加载到用户可用（即可以对用户的交互做出响应）需要多长的时间。
- 2. Experience （用户体验）时间线上新增布局变动事件
- 性能面板新增了 Experience 时间线，并将标记出 Layout Shift （布局变动）事件，CLS （Cumulative Layout Shift）指标也是谷歌的一项新实验的性能指标，它可以帮助我们鉴别出那些意外的布局变动，以此确保界面的稳定性。
- 在 Experience 时间上，点击一个 Layout Shift 事件（如下图中的红色小方块），在下面的 Summary 面板中会展示关于这个事件的详情，如 Moved From（偏移的开始坐标）、Moved to（偏移的结果坐标）
- 意外的布局变动会非常影响用户体验，比如：图片加载慢，而当图片又没有指定宽高属性时，图片在加载完成时就会影响已经加载出来的内容，导致页面产生大幅度布局变动。关于 CLS 指标的详细介绍，可以查看这篇文章 web.dev/cls/
- 在 Chrome 84 之前，当我们把一个 resolved 的 Promise 在 Console 中打印出来时，其状态会被描述为“resolved”，如下图：
- 但其实根据 Promise 规范中的描述，其应该描述为 “fullfilled”，为了贴近规范，Chrome 84 已经对此做了调整，如下图：
- 1. 开始支持 revert 关键字
revert 关键字跟 unset 关键字有点类似，但不完全一样，关于他们的区别可以阅读这篇文档 developer.mozilla.org/en-US/docs/…。另外，CSS 中还有其他一些关键字，如 inherit、initial。 - 2. 鼠标 hover 支持预览 background-image 属性中的图片
- 3. 颜色选择器将采用空格分隔的参数指定写法
- 根据 CSS Color Module Level 4 规范文档，颜色类的函数如 rgb()，应该支持空格分隔的参数写法，例如：rgb(0, 0, 0) 可以写成 rgb(0 0 0)。
- 在 Chrome 84 中，颜色选择器将采用这种新的写法，对于旧的写法，你可以通过按住 Shift 键在任意颜色值前的图标上多次点击来切换不同的颜色值函数，这些函数都将采用这种新的传参写法展示。
- 注意：后续新出的 CSS 特性如 color() 函数将不再支持旧的参数写法（逗号分隔的参数列表）
弃用之后，如果想要查看元素的属性，可以通过 console.dir($0) 命令来实现
- Chrome 83 开发者工具新特性
暂未写作完成，待补充文章链接 - Chrome 83 新特性
暂未写作完成，待补充文章链接 - Chrome 更新日志目录
mubu.com/doc/AObcWUR…
- 本文同时发布与于
- 幕布平台：mubu.com/doc/bqD1xsr…
- 掘金平台：
- 作者：西楼听雨（微信名 t.t.）
我就是21世纪最伟大的发明 - 联系 & 交流 & 聘用
