玩转|玩转 chrome 效率起飞

效率高不高不知道,真的有趣。
Copy as cURL、Copy as PowerShell 使用场景: 前后端沟通无障碍。xxxx/yyy 接口不符合预期,快速让后端快速还原现场定位问题。
使用方式: 在目标接口上鼠标右键 Copy as cUrl (mac)、Copy as PowerShell(windows) 将文本发给后端同学即可,后端在终端输入文本请求接口。
玩转|玩转 chrome 效率起飞
文章图片

Capture full-size screenshot 使用场景: 某天你组长让提供一张网站完整截图,不幸的是网页滚动了几屏。这可咋整??
使用方式:打开浏览器开发者工具,然后 windows 上键入 Ctrl+Shift+P,Mac 上键入 Command+Shift+P ,然后输入 capture 后选择要截图的方式。
详解:Capture full-size screenshot 截全屏、Capture area screenshot 自定义截图区域、Capture node screenshot 精准截元素展示
玩转|玩转 chrome 效率起飞
文章图片

Store as global variable 使用场景:临时处理接口数据,构思设计下代码。。。
使用方式:在 network 面板上的接口响应上右键,然后在 console 窗口操作变量吧
其他: 非常实用,这个例子不足体现它的妙处。自己体会吧
【玩转|玩转 chrome 效率起飞】玩转|玩转 chrome 效率起飞
文章图片

玩转|玩转 chrome 效率起飞
文章图片

console.table() 使用场景:后端同学看数据?不知道有啥用反正很神奇。
使用方式:和 Store as global variable 一起用简直妙不可言。
玩转|玩转 chrome 效率起飞
文章图片

$i 使用场景:想快速试用下 loadsh、dayjs工具包,或者依赖工具包处理数据
使用方式:安装 console-importer 插件,重启下浏览器。在 console 中 $i('dayjs') 试试吧
玩转|玩转 chrome 效率起飞
文章图片

荐文 你不知道的 Chrome DevTools 玩法
你不知道的Chrome调试工具技巧 - 系列译

    推荐阅读