作为前端工程师，有时需要将做到一半的网页发送给 PM 和 Designer 来获得他们的反馈。Mac 自带的截屏功能只能截取显示在屏幕上的内容，但是网页长度常常会超出屏幕高度，只依靠这个截图软件无法实现一次性的截取整个网页。
对这个问题，最简单粗暴的方法是手动滑动页面来截取多个图片，根据图片顺序命名文件。但是这样作的话 PM 和 Designer 需要一张张打开，而且他们看到的也不是一个整体的效果。所以，这样做只是间接的把问题推给了别人，而并没有从根本上解决它。一个合格的工程师，应该探索下更好的解决方案。
在遇到这类问题时，我的思路是依次探索：原生解决方案 > 对现有工具进行组合 > 安装浏览器插件或 App。
由于原生的 Mac 截屏功能无法解决问题，我试着对现有工具组合：用 photoshop 将多张截图拼接到一起后再发送。但是的缺点是很耗时间，尤其时页面还是半成品的情况下，常常需要反复改动，比如下图是 PM 的反馈。改动后，又需要重新使用 photoshop 拼接一次，这不仅低效，而且是在做重复性的工作。软件工程师都不喜欢重复性的工作：
由于方案二耗时太多，我便开始考虑方案三，安装浏览器插件或 App。简单搜索后，发现这类产品非常多，选择成本很高。
于是，便回到继续探索原生解决方案的思路上。这时，发现 Chrome 浏览器在近期发布的版本中添加了截图的功能。下面以获取 LinkedIn 整个首页为例来介绍下具体的操作方法：
利用 Chrome 浏览器的开发者工具截取整个页面
- 打开 Chrome 浏览器，进入需要截图的网站页面
- 等待页面加载完毕后，通过下面方法打开开发者工具：在页面任何地方点击鼠标右键，在弹出菜单中选择“检查（Inspect）”选项。或者使用快捷键组合：
Alt+Command+I(Mac) 或Ctrl+Shift+I(Windows) - 使用快捷键组合来打开命令行（command palette）：
Command+Shift+P(Mac) 或Ctrl+Shift+P(Windows) - 在命令行中输入“Screen”，这时自动补齐功能会显示出一些包含 “Screen” 关键字的命令。移动方向键到“Capture full size screenshot”并回车（或直接用鼠标点击这个选项）
动图演示操作步骤
