玩转 chrome 效率起飞

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

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调试工具技巧 - 系列译