玩转 chrome 效率起飞

110 阅读1分钟

效率高不高不知道,真的有趣。

Copy as cURL、Copy as PowerShell

使用场景: 前后端沟通无障碍。xxxx/yyy 接口不符合预期,快速让后端快速还原现场定位问题。

使用方式: 在目标接口上鼠标右键 Copy as cUrl (mac)、Copy as PowerShell(windows) 将文本发给后端同学即可,后端在终端输入文本请求接口。

Capture full-size screenshot

使用场景: 某天你组长让提供一张网站完整截图,不幸的是网页滚动了几屏。这可咋整??

使用方式:打开浏览器开发者工具,然后 windows 上键入 Ctrl+Shift+P,Mac 上键入 Command+Shift+P ,然后输入 capture 后选择要截图的方式。

详解:Capture full-size screenshot 截全屏、Capture area screenshot 自定义截图区域、Capture node screenshot 精准截元素展示 👍

Store as global variable

使用场景:临时处理接口数据,构思设计下代码。。。

使用方式:在 network 面板上的接口响应上右键,然后在 console 窗口操作变量吧

其他: 非常实用,这个例子不足体现它的妙处。自己体会吧

console.table()

使用场景:后端同学看数据?不知道有啥用反正很神奇。

使用方式:和 Store as global variable 一起用简直妙不可言。

$i

使用场景:想快速试用下 loadsh、dayjs工具包,或者依赖工具包处理数据

使用方式:安装 console-importer 插件,重启下浏览器。在 console 中 $i('dayjs') 试试吧

荐文

你不知道的 Chrome DevTools 玩法

你不知道的Chrome调试工具技巧 - 系列译