在PC端，截图还算是比较常见的需求，使用微信等聊天软件可以轻松实现对窗口内容的截图。不过在浏览网页时，如果想要对网页长截图的话，微信等软件的截图功能就不能满足需求了。借助Chrome自带的开发者工具，可以实现对网页内容的长截图。

打开 Chrome 开发者工具

有多种不同的方式打开Chrome开发者工具：

  • 在Chrome菜单中选择 更多工具 > 开发者工具
  • 在页面元素上右键点击，选择 “检查”
  • 使用快捷键F12或Ctrl+Shift+I (Windows) 或 ⌘Command + ⌥Option + I (Mac)

开启开发者工具的指令面板

使用命令Ctrl + Shift + P (Windows) 或 ⌘Command + ⇧Shift + P (Mac)，P是 Palette， 即 Chrome Developer Tools Command Palette.

使用自带的截图工具截图

共有四个截图相关选项：

  • Capture area screenshot
    类似于聊天软件的截图功能，出现十字光标，通过光标选择截图框，不过只能截网页，而无法覆盖开发者工具面板，且无法立即编辑截图，此功能较鸡肋。

  • Capture full size screenshot
    顾名思义，全尺寸截取，会将整个网页内容截取下来。

  • Capture screenshot
    只截取当前展现出页面的部分，即只截取被开发者工具分割了网页的上半部分，同样较鸡肋。

  • Capture node screenshot
    full size screenshot会截取整个网页内容，但更多时只想截取网页的部分内容，比如正文。这时可以用node screenshot实现对特定区域的截取。选中id为docs-main-inner的div，然后开启指令面板，使用Capture node screenshot，便可截取文章的主体部分。