虫部落

查看: 828|回复: 4

利用 Chrome 原生工具截取手机版网页长图

[复制链接]

2

主题

27

帖子

892

积分

中级会员

积分
892
发表于 2018-10-10 11:50:48 | 显示全部楼层 |阅读模式
本帖最后由 撩月 于 2018-10-10 16:09 编辑

Chrome浏览器应用商店虽然有很多截图增强扩展,但在截取一些比较复杂的网页时,往往会出现元素错位、重复的现象。


而Chrome开发者工具中自带的截图命令,由于是渲染引擎直接输出,其比普通扩展速度更快,分辨率也更高,而且你可以调制成手机版网页并进行截图,这样当你保存图片到手机上时,不会因为图片分辨率问题影响体验。


使用截图功能前,首先你的Chrome浏览器必需升至59或更高版本。


第一步,首先按下 F12(Mac为 ⌘Command + ⌥Option + I ) 快捷键,打开调试界面

QQ截图20181010112955.png


第二步,按下 Ctrl + Shift + M (Mac 为 ⌘Command + ⇧Shift + M) 顶部的工具栏中,出现你需要模拟的设备和分辨率的设置。

QQ截图20181010113700.png


点击顶部工具栏中 QQ截图20181010114654.png ,能够横屏截图

QQ截图20181010114800.png

第三步,设置好后,按下 Ctrl + Shift + P ( Mac 为 ⌘Command + ⇧Shift + P),在调试栏输入命令 Capture full size screenshot(一般输入前几个字母就会出现),点击命令就会出现保存路径,点击确认就可以了。

QQ截图20181010114233.png

当然你只要截普通的网页长图,你只需跳过第二步直接操作第三步就好。
做一个有担当的人,,,

3

主题

79

帖子

8233

积分

金牌会员

积分
8233
发表于 2018-10-11 17:02:42 | 显示全部楼层
包图网PPT模板下载
这个很有用,谢谢!

0

主题

42

帖子

2707

积分

高级会员

积分
2707
发表于 2018-10-11 22:45:29 | 显示全部楼层
优达学城微信小程序开发课程
bangding
少年啊
回复

使用道具 举报

0

主题

2

帖子

102

积分

注册会员

积分
102
QQ
发表于 2018-10-12 16:50:04 | 显示全部楼层
学习了,正好需要

0

主题

4

帖子

171

积分

注册会员

积分
171
发表于 2018-10-13 19:22:18 | 显示全部楼层
这个技巧太实用了,谢谢。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表