Chrome 84 开发者工具新特性

本文参考自：What's New In DevTools (Chrome 84)
developers.google.com/web/updates…（需越墙）​

编注：新特性都是先在 Chrome 的 Canary、Beta 通道中发布的，要想第一时间体验新特性，请下载 Canary 或 Beta 通道版本的 Chrome。本文中的全部连接都是须要越墙的，请自备经过方式。

新特性一：新增 Issues 标签
当咱们打开开发者工具后，咱们常常会碰到 Console 中有许多许多警告和错误消息的状况。这些警告和错误消息跟咱们正常打印出来的日志混在一块儿，显得很是杂乱。为了解决这个问题，Chrome 84 新增了一个 Issues 标签，把这些警告和错误消息集中到了一块儿，并以一种结构化、分类化的形式进行组织，同时给出了产生这些问题的详细缘由、解决这些问题的指导，以及全部受影响的资源或请求。

新特性二：Inspect 气泡中新增了 Accessibility 信息
以下图

新特性三：Performance 面板相关的更新

• 1. 底部状态栏新增 TBT 指标值展现
  • TBT（Total Blocking Time，总阻塞时长）是谷歌正在试验的各项新的性能指标中主要的一项，他能够为更精确计算 FID （First Input Delay，首次交互延迟）指标提供支持。从名称上能够看出，他能够将来测量页面从开始加载到用户可用（便可以对用户的交互作出响应）须要多长的时间。
    注意：页面开始有展现或者已经完成展现，并不表明页面已经能够开始交互了，由于可能会有一些JS还未执行完成，正在阻塞主线程。
  • 想要获取 TBT 指标，不能使用 Reload Page 来测量，须要点击 Record 按钮，而后手动重载页面，等待页面页面完成再点击中止录制才能得到 TBT 指标。
    
• 2. Experience （用户体验）时间线上新增布局变更事件
  • 性能面板新增了 Experience 时间线，并将标记出 Layout Shift （布局变更）事件，CLS （Cumulative Layout Shift）指标也是谷歌的一项新实验的性能指标，它能够帮助咱们鉴别出那些意外的布局变更，以此确保界面的稳定性。
  • 在 Experience 时间上，点击一个 Layout Shift 事件（以下图中的红色小方块），在下面的 Summary 面板中会展现关于这个事件的详情，如 Moved From（偏移的开始坐标）、Moved to（偏移的结果坐标）
    
  • 意外的布局变更会很是影响用户体验，好比：图片加载慢，而当图片又没有指定宽高属性时，图片在加载完成时就会影响已经加载出来的内容，致使页面产生大幅度布局变更。关于 CLS 指标的详细介绍，能够查看这篇文章 web.dev/cls/

新特性四：调整了 Promise 对象在 Console 中打印出来的状态描述，使其保持与 Promise 规范一致

• 在 Chrome 84 以前，当咱们把一个 resolved 的 Promise 在 Console 中打印出来时，其状态会被描述为“resolved”，以下图：
  
• 但其实根据 Promise 规范中的描述，其应该描述为 “fullfilled”，为了贴近规范，Chrome 84 已经对此作了调整，以下图：
  

新特性五：Styles 面板相关的更新

• 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() 函数将再也不支持旧的参数写法（逗号分隔的参数列表）

新特性六：Elements 标签下 Properties 小面板将会被弃用
弃用以后，若是想要查看元素的属性，能够经过 console.dir($0) 命令来实现

往期文档

• Chrome 83 开发者工具新特性
  暂未写做完成，待补充文章连接
• Chrome 83 新特性
  暂未写做完成，待补充文章连接
• Chrome 更新日志目录
  mubu.com/doc/AObcWUR…

其余说明

• 本文同时发布与于
  • 幕布平台：mubu.com/doc/bqD1xsr…
  • 掘金平台：
• 做者：西楼听雨（微信名 t.t.）
  我就是21世纪最伟大的发明​​
• 联系 & 交流 & 聘用