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

前几天在其他网站看到的教程，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 等装置开启网页的显示情形，再搭配前面介绍的截图功能抓取网页在手机显示的画面截图。