在工作时，我们有时需要给一些网页进行截图。或许你曾尝试过各类插件，也使用过一些截图工具。然而，浏览器本身就具备截图的特性，并且功能十分丰富。它不但能够截取浏览器的窗口，还可以截取网页的全图，能够截取移动端的显示效果，甚至可以进行带壳截图。

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

截图指令

截图功能被藏在开发者工具里，因此在截图之前你得先打开开发者工具。我们既可以直接在页面上按下鼠标右键并选择「检查」（或「审查元素」），也可以按下 Cmd++I（在 系统下是 Ctrl++I）来打开开发者工具。

浏览器窗口底部弹出的是一个面板，这个面板就是开发者工具。接着，我们持续按下 Cmd++P（这里是 Ctrl++P），这样就能打开指令输入框。然后，在指令输入框中进行输入，就可以看到有四个与截图相关的指令啦。

这四个指令分别对应着：

• ：截取当前浏览器窗口显示的内容，称作窗口截图。

区域截图

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

全网页截图

全网页截图，指的是会截取网页一直滚动到底部的整个画面。然而，由于截取全网页需要自动滚动（这种滚动是隐藏式的），所以倘若网页很长，所需的时间或许会比较久，并且会出现卡顿现象。与此同时，因为有些页面的滚动设置较为复杂（例如一些管理后台页面存在多区域可滚动的情况），可能会导致截取失败，只能截取到一小部分。

我们按下上下方向键，选取了第二个指令（ full size ）。接着按下回车键，这样就能够截取网页的全图啦。

节点截图

节点截图是我较为喜爱的一个功能，我通常用它来制作表情。所谓节点截图，即截取网页的某一个元素节点。网页是由 HTML 元素构成的，例如一个图片是由 HTML 元素组成的。

，一段文字是

，一个标题可能是，等等。

我们可以在顶部菜单栏里选取第一个菜单，也就是（元素）。接着，在下方就能看到整个网页的节点。这些节点呈现出一层又一层的结构。当我们点击左边的三角形时，能够将它们展开。而当我们点击某一行时，就可以看到网页中对应的元素被一层蓝色所覆盖。

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

此时我们已经选定了这个节点，接着按下 Cmd++P（或者是 Ctrl++P），从而打开指令输入框，然后在输入框中输入选择 node ，之后按下回车键，就能够将这个节点截取并保存下来啦。

我喜欢在进行截取之前，先对节点中的文字进行改变，如此便能做出一些奇特的表情包。你能够继续展开节点，找到文字后进行双击，进而可以编辑文字内容。

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

窗口截图

所谓窗口截图，指的是直接截取浏览器的整个窗口。我们按下上下方向键，选取第四个指令并回车，这样就能截取浏览器窗口中的网页了。

其他设备尺寸截图

开发者工具具备模拟各种设备尺寸的能力。它可以模拟手机上的显示效果，也可以模拟宽屏显示器上的显示效果。凭借这个功能，我们能够在电脑上轻松截取其他设备尺寸的图片。

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

移动端截图

点击上述所说的更多操作按钮，能够看到菜单里有“ ”以及“full size”这两个截图操作。其中第一个操作是截取当前窗口，第二个操作是截取整个网页长图，通过这样的方式，我们就可以在电脑上截取移动端或其他设备的图片了。

带壳截图

有时候我们期望能更具个性化。如果截图能够带有手机外形，那么就可以点击更多操作中的“Show”。在这种情况下，预览窗口周围会显示你所选的手机模型。接着再使用刚才那个操作进行截图，就能够带着手机模型一起截取下来了。然而，遗憾的是，只有少数几个设备具备这样的模型。

自定义屏幕尺寸

可选设备列表中的设备或许并非你所期望的，亦或是你想要自定义一个独特的尺寸，在此情形下，能够点击可选设备列表下方的“Edit”菜单，以对设备列表进行编辑。

此时，在下方的开发者工具里会出现设备编辑面板。可以观察到，存在很多设备未被勾选，这意味着它们不会在顶部设备列表中显示。你能够选择自己喜爱的设备，如此一来，下次就可以在顶部进行切换了。

如果你想要自定义一个尺寸，那么可以点击最上面的“Add”。通过点击“Add”，就能够自己添加一个特殊的尺寸。并且，你还可以对其进行设置，比如设置它是移动设备还是桌面设备，以及设置设备像素比等属性。

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

它发布在我的少数派账号里。如果你希望看到其他内容，可点击阅读原文前往我的少数派页面。