最新消息:

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

电脑系统 longxiaotianya 662浏览

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

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

 方法一:第一步:打开chrome开发者工具。

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

 

 

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

 方法二: 

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

 

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

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

转载请注明:458电脑园 » 利用 Chrome 控制台进行网页长截图