Chrome 97 开发者工具新特性

981 阅读1分钟

参考源: 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.)