利用 Chrome 控制台进行网页长截图

要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本。在想要截图的网页中,首先按下Command + Option + I(Windows 为F12)快捷键,召唤出调试界面。
鲜果博客

前几天在其他网站看到的教程,chrome的控制台就可以给网站截整页的图,瞬间又涨姿势了,现在特来整理发布一下。

要想使用截图功能,你需要首先确保 Chrome 已升级至 59 或更高版本。在想要截图的网页中,首先按下Command + Option + I(Windows 为F12)快捷键,召唤出调试界面。

方法一:

第一步:打开chrome开发者工具。
打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(macOS 是 command + Shift + P)。紧接着输入screen,它会提示有三个选项,如下图所示:

利用Chrome开发者工具功能进行网页整页截图的方法

分别是截取全屏、node 模式以及当前范围,用鼠标点击或者用键盘选择“Capture full size screenshot”然后回车就可以了。

方法二:

按F12打开调试页面,
然后按下ctrl+shift+p,输入命令Capture full size screenshot,敲回车,浏览器会自动截取整个网页内容。

第二步:截取手机版的网页

如果你想在智能手机上截取网页截图,可通过快速键 Ctrl + Shift + M(Mac 为 ⌘Command + ⇧Shift + M)来开启模拟工具,切换 iPhone、iPad、Nexus、Galaxy 等装置开启网页的显示情形,再搭配前面介绍的截图功能抓取网页在手机显示的画面截图。

关于我 | lixianguo

只是一位喜欢音乐、小说、诗歌、散文的八零后伪程序员。一不小心入了wordpress的坑,从此一发不可收拾!每天以折腾主题代码为乐。

本文来源网络,经授权后由lixianguo发布,观点不代表鲜果博客的立场,转载请联系原作者。
16
鲜果博客

发表评论