一个好用的 Chrome 原生长截图工具

社区开发工具

版本要求

  • Chrome 已升级至 59 或更高版

截取整个网页

  • 在想要的截图页面,唤出调试工具 Mac ⌘Command + ⌥Option + I(Windows 为 Ctrl + Shift + I)

picture.image

  • 按下 ⌘Command + ⇧Shift + P(Windows 为 Ctrl + Shift + P),输入命令 Capture full size screenshot(输入前缀会自动进行匹配),回车,Chrome 就会自动截取整个网页内容并保存至本地。渲染引擎直接输出,其比普通扩展速度更快,分辨率也更高。

picture.image

截取部分网页

  • 除了可以截取整个网页,我们也可以选择截图部分选中网页:
  • 右键选中检查,选中我们想要的部分,按下 ⌘Command + ⇧Shift + P(Windows 为 Ctrl + Shift + P),输入命令 Capture node screenshot(输入前缀会自动进行匹配),回车即可。
  • 以截取示例中中间内容部分为例:

picture.image

小技巧

截图手机网页长截图

  • 除了网页常截图外,还可以切换模拟设备,截取手机网页长截图,首先将浏览器展示模式切换为模拟手机端,选中需要的分辨率,其它操作和上面一致。

picture.image

去除截图中不需要的部分

  • 当截取部分有不需要的网页时,我们可以移除掉对应的网页元素,鼠标移动到需要移除的部分,右键检查,选中对应 element,然后右键选择 delete element,然后再进行截图。
  • 比如上文示例中的微信公众号二维码:

picture.image

0
0
0
0
关于作者
关于作者

文章

0

获赞

0

收藏

0

相关资源
字节跳动客户端性能优化最佳实践
在用户日益增长、需求不断迭代的背景下,如何保证 APP 发布的稳定性和用户良好的使用体验?本次分享将结合字节跳动内部应用的实践案例,介绍应用性能优化的更多方向,以及 APM 团队对应用性能监控建设的探索和思考。
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论