干货 Tips Rules & Tips
1. 遵守中国大陆相关法律法规
2. 本版还在调整当中

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

查看: 4023|回复: 4
1
Arsenal_vf 发表于 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

当然你只要截普通的网页长图,你只需跳过第二步直接操作第三步就好。
姬无命 发表于 2018-10-11 17:02:42
这个很有用,谢谢!
不想生病 发表于 2018-10-11 22:45:29
:$bangding
万俟博 发表于 2018-10-12 16:50:04
学习了,正好需要
溪上青青草 发表于 2018-10-13 19:22:18
这个技巧太实用了,谢谢。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

虫部落 陕ICP备14001577号-1川公网安备 51019002003015号联系我们FAQ关于虫部落免责声明虫部落生存法则蛙先知 - AI 玩家社区 🚧

Build with for "make search easier" Copyright © 2013-2024. Powered by Discuz! GMT+8, 2024-3-29 07:02

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