参考源: What's New In DevTools (Chrome 97)
developer.chrome.com/en/blog/new…
**编注:**新特性都是先在 Chrome 的 Canary 通道中发布的,要想体验本文提到的新特性,请下载 Canary 通道版本的 Chrome。本文中的所有链接都需要自备梯子。
新特性一:新增 Recorder 面板支持宏录制
这是一项预览特性(抢先体验),可以用它来录制我们跟页面的交互过程(如点击、输入、滚动等),然后再回放此过程(类似编辑器的宏录制功能),或者用 Performance 面板自动测量录制的过程。
UI 界面如下图,点击 "Start new recording" 后即可进入录制
录制完成后的界面如下图,其中 Replay 按钮是回放,Measure performance 按钮是转入 Performance 面板进行回放并测量性能,再往下面,则是此次录制的交互过程,每个节点都支持修改,也可以增删节点。具体使用文档可查看 此链接。
另外,我们还可以将录制结果导出为 Puppeteer 脚本(Google 的 Chrome 无头浏览器工具库)——点击上图中删除按钮左边的按钮即可。
新特性二:更新了设备列表
如下图
新特性三:在 Element 面板中编辑 HTML 时支持属性名自动补全
如下图
新特性四:开发者工具中的设置支持跨设备同步
如下图。目前这个还是一项实验特性,稳定性有待观察。
往期文档
Chrome 96 开发者工具新特性
www.mubucm.com/doc/UofVw7v…
Chrome 更新日志目录
mubu.com/doc/AObcWUR…
其他说明
本文同时发布与于
幕布平台:www.mubucm.com/doc/uCZs1qk…
掘金平台:juejin.cn/post/703886…
作者:西楼听雨(微信名 t.t.)