chrome自带的截图

Posted 2020-12-08 lemonforce

在工作中，我们难免需要给一些网页截图。也许你尝试过各种插件，或者是使用过一些截图工具，但其实，Chrome 本身就带有截图特性，功能还很丰富。它不仅可以截取浏览器窗口，还可以截取网页全图，截取移动端显示效果，甚至带壳截图。

那么 Chrome 的截图该怎么用呢？让我给你详细地介绍一下吧。

截图指令

Chrome 的截图功能藏在开发者工具中，所以在截图之前你需要先打开开发者工具。我们可以直接在页面上按下鼠标右键，选择「检查」（或「审查元素」），也可以按下 Cmd+Option+I（Windows 下是 Ctrl+Shift+I），来打开开发者工具。

 

Chrome 开发者工具

 

在浏览器窗口底部弹出的面板就是开发者工具啦。此时，我们继续按下 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打开指令输入框，在里面输入 screenshot，就可以看到四个截图相关的指令了。

 

指令输入框

 

这四个指令分别对应着：

• Capture area screenshot：区域截图，截取网页的一个区域。
• Capture full size screenshot：全网页截图，截取整个网页。
• Capture node screenshot：节点截图，截取网页中的一个元素节点。
• Capture screenshot：窗口截图，截取当前浏览器窗口显示的内容。

区域截图

我们按上下方向键选取第一个指令（Capture area screenshot）并回车，此时移动鼠标至网页中，光标变为十字形。此时，你就可以在网页中划出一个区域来进行截图了。当你划完范围松开鼠标时，Chrome 就会自动保存刚才的截取的区域图片了。

 

 

全网页截图

全网页截图，是指 Chrome 会截取网页一直滚动到底部的整个画面。不过因为截取全网页需要自动滚动（隐藏式的），所以如果网页很长的话需要的时间可能比较久，会看到卡顿。同时，因为有些页面设置的滚动比较复杂（比如一些管理后台页面多区域可滚动），可能会截取失败，只能截取到一小部分。

我们按上下方向键选取第二个指令（Capture full size screenshot）并回车，就可以截取网页全图啦。

截取少数派首页全图

 

节点截图

节点截图是我比较喜欢的一个功能，我一般用它来做表情。所谓节点截图，就是截取网页的某一个元素节点。网页都是由 html 元素组成的，比如说一个图片是 <img>，一段文字是 <p>，一个标题可能是 <h1>，等等。

我们可以在顶部菜单栏中选取第一个菜单，即 Elements（元素），这时候就能在下面看到整个网页的节点了。这些节点一层又一层，当我们点击左边的三角形时可以展开它们，点击某一行时可以看到网页中对应的元素被一层蓝色覆盖。

 

 

当然，这样在复杂的 HTML 代码中找到想要的页面元素太耗费时间了。我们可以点击开发者工具左上角的元素选择箭头，就可以移动鼠标到页面中直接选取需要的节点了。

 

 

此时我们已经选中了这个节点，按 Cmd+Shift+P（Windows 下是 Ctrl+Shift+P）打开指令输入框，输入 screenshot 选择 Capture node screenshot，回车就可以把这个节点截取保存下来啦。

我喜欢在截取之前，先改变一下节点中的文字，这样就可以做出一些奇怪的表情包。你可以继续展开节点，找到文字并双击，就可以编辑文字内容了。

 

 

编辑完成之后，再选中前面选的外层一点的节点，按上面的方式截取这个节点，就能够下载一个表情包素材了。

 

表情完成图

 

窗口截图

所谓窗口截图，就是直接截取浏览器的整个窗口。我们按上下方向键选取第四个指令（Capture screenshot）并回车，就可以截取浏览器窗口中的网页啦。

其他设备尺寸截图

Chrome 开发者工具本身可以模拟各种设备的尺寸，比如说模拟手机上的显示效果，或者是宽屏显示器上的显示效果。借助这个功能，我们可以轻松在电脑上截取其它设备尺寸的图片。

在此之前，我们需要先点击开发者工具的左上角的设备切换按钮，进入到设备模拟模式。可以看到，此时网页会以移动端模式显示，在最上方可以切换设备（截图中选的是 iPhone X）、显示比例等，最右边还有一个更多操作的按钮，我们后面所讲的操作都在这里。

 

设备模拟模式

 

移动端截图

点击上面所说的更多操作按钮，可以看到菜单中有「Capture screenshot」和「Capture full size screenshot」两个截图操作。第一个就是截取当前窗口，第二个就是截取整个网页长图，这样我们就能在电脑上截取移动端或其他设备的图片了。

 

截取移动端的图

 

带壳截图

有时候我们想更加个性化一点，截图能带个手机外形，就可以点击更多操作中的「Show device frame」。此时预览窗口周围就会显示你选的手机模型，此时再使用刚才那个「Capture screenshot」操作进行截图，就可以带着手机模型一起截取下来啦。不过遗憾的是，只有少数几个设备才有模型。

 

带壳截图

 

自定义屏幕尺寸

也许可选设备列表里面的设备没有你想要的，或者你想自定义一个特殊的尺寸，这时候就可以点击可选设备列表下面的「Edit」菜单，来编辑设备列表。

 

编辑设备列表

 

此时，在下方的开发者工具中就会出现设备编辑面板。可以看到，有很多设备都没有勾选，也就是说它们不会在顶部设备列表中出现。你可以选择自己喜欢的设备，这样下次就可以在顶部切换了。

 

编辑设备列表

 

如果你想自定义一个尺寸，可以点击最上面的「Add custom device」，这样就可以自己添加一个特殊的尺寸了。甚至，你还可以设置它是移动设备还是桌面设备，以及设备像素比等属性。

 

自定义屏幕尺寸

 

怎么样？有没有想打开你的 Chrome 试试呢？