screenshot 无需安装插件, 用 Chrome 原生工具就能实现长截图

Chrome 浏览器强大的地方之一在于支持相当丰富的扩展，碰到网页截图的情况，Awesome Screenshot、Nimbus Screenshot等已经是大家熟知的截图扩展应用，而 Chrome 更吸引人的地方在于，产品本身保持简洁，同时也内置了实用的功能，同样用户无需安装任何扩展的前提下，利用 Chrome 原生工具也可以实现网页截图效果。Chrome浏览器的优势之一就是支持丰富的扩展。说到网页截图，Awesome截图和Nimbus截图已经是众所周知的截图扩展应用了。Chrome更吸引人的是产品本身简单，内置实用功能。在用户不需要安装任何扩展的前提下，使用Chrome原生工具也可以达到网页截图的效果。

Chrome 原生的截图功能隐藏在开发者工具中，Windows 平台按下 F12快速调出开发者调试工具界面（macOS 系统快捷键为⌘Command + ⌥Option + I）Chrome的原生截图功能隐藏在开发者工具中。在Windows平台上按F12键可以快速调出开发者调试工具界面(macOS系统的快捷键是⌘Command+⌥Option+I)

接着按下 Ctrl + Shift + P（macOS 版为⌘Command + ⇧Shift + P）转至搜索命令工具条，或者光标移动至工具条按钮 ┊，选择Run command，下面只需要在命令工具的输入框中输入对应的命令即可实现不同的截图效果。然后按ctrl+shift+p(MAC OS版本的⌘Command+⇧Shift+P)转到搜索命令工具栏，或将光标移动到工具栏按钮┊并选择运行命令。那么，你只需要在命令工具的输入框中输入相应的命令，就可以实现不同的截图效果。

命令功能Capture full size screenshot网页长截图Capture screenshot截取网页可视区域Capture area screenshot截取选择部分区域Capture node screenshot截取手机版网页长图网页长截图。输入命令Capture full size screenshot实现整张网页长截图，Chrome 会自动将整个网页内容截取并保存至本地电脑，整个截取速度和效果上都有着不错的表现。命令功能抓取全尺寸截图网页长截图抓取截图抓取网页可视区域抓取区域截图选择部分区域抓取节点截图抓取手机版网页长截图长图。输入Capture全尺寸截图命令，实现整个网页的长截图。Chrome会自动抓取并保存整个网页内容到本地电脑，整体抓取速度和效果都有不错的表现。

截取网页可视区域。输入命令Capture screenshot将当前网页显示的区域自动截图并保存到本地。截取网页的可见区域。输入命令捕获屏幕截图，自动捕获当前网页上显示的区域并保存在本地。

截取选择部分区域。输入命令Capture area screenshot将截取由用户选择的部分区域。截取并选择一些区域。输入命令捕获区域截图将捕获用户选择的部分区域。

截取选择元素的内容。输入命令Capture node screenshot将截取网页中选定元素的内容。这一截图命令特别之处在于，帮助用户准确地截取网页中特定元素的内容，首先用户选择网页中某个截取元素，比如某张图片、某个边栏内容等，接着再运行Capture node screenshot，这样可以减少手动选择截图时的错误率。截取选定元素的内容。输入命令捕获节点截图将捕获网页中所选元素的内容。这个截图命令的特别之处在于，它帮助用户准确地捕捉网页中特定元素的内容。首先，用户选择网页中截取的元素，如图片、侧栏内容等。，然后运行Capture节点截图，可以降低手动选择截图时的出错率。

最后，通过 Chrome 模拟移动设备的功能，结合前面整张网页长截图的命令，即可生成一张不错的手机版网页长图。首先选择开发者工具条移动设备的按钮（Windows 系统快捷键 Ctrl + Shift + M）打开模拟设备功能，Chrome 内置了多个设备和分辨率设置选项，接着输入Capture screenshot命令自动输出一张手机版网页的长截图，下一步使用套壳工具就可以输出一张美观的展示图。最后，使用Chrome模拟移动设备的功能，结合之前对整个网页的长截图的命令，可以生成好的移动版网页的长图。首先在开发者工具栏中选择移动设备的按钮(Windows系统快捷键Ctrl+Shift+M)打开模拟设备功能。Chrome内置多种设备选项和分辨率设置。然后，输入“捕获屏幕截图”命令，自动输出网页移动版本的长屏幕截图。接下来，使用shell工具输出漂亮的显示图片。