chrome控制台面板好用却不为人知的小工具

675 阅读1分钟

截图工具

打开控制台,点击右上角扩展图标,选择Run command打开命令行。

在命令行中输入capture

相关截图类型命令如下表:

命令描述
Capture area screenshot手动选择区域截图
Capture full size screenshot捕获整个网页截图
Capture node screenshot捕获节点截图
Capture screenshot捕获当前窗口截图

慢放动画

打开控制台More tools,选择 Animations,可以调整页面中目标动画的速率。

示例:

3D 演示页面层级

打开控制台More tools,选择 Layers,可以查看页面各层级之间的3D效果图,非常直观易懂。

示例:

资源占用监视

打开控制台More tools,选择 Performance monitor,可以直观的查看DOM节点数、CPU和内存占用等情况。

示例: