如何利用 Chrome 浏览器实现滚动截屏

摘要：本文会告诉你如何在不安装第三方软件的状况下如何实现完美截屏

做为前端工程师，有时须要将作到一半的网页发送给 PM 和 Designer 来得到他们的反馈。Mac 自带的截屏功能只能截取显示在屏幕上的内容，可是网页长度经常会超出屏幕高度，只依靠这个截图软件没法实现一次性的截取整个网页。

对这个问题，最简单粗暴的方法是手动滑动页面来截取多个图片，根据图片顺序命名文件。可是这样做的话 PM 和 Designer 须要一张张打开，并且他们看到的也不是一个总体的效果。因此，这样作只是间接的把问题推给了别人，而并无从根本上解决它。一个合格的工程师，应该探索下更好的解决方案。

在遇到这类问题时，个人思路是依次探索：原生解决方案 > 对现有工具的组合 > 安装浏览器插件或 App。

因为原生的 Mac 截屏功能没法解决问题，我试着对现有工具组合：用 photoshop 将多张截图拼接到一块儿后再发送。可是的缺点是很耗时间，尤为时页面仍是半成品的状况下，经常须要反复改动，好比下图是 PM 的反馈。改动后，又须要从新使用 photoshop 拼接一次，这不只低效，并且是在作重复性的工做。软件工程师都不喜欢重复性的工做。

“Hackers (and creative people in general) should never be bored or have to drudge at stupid repetitive work” How To Become A Hacker

因为方案二耗时太多，我便开始考虑方案三，安装浏览器插件或 App。简单搜索后，发现这类产品很是多，选择成本很高。

因而，便回到继续探索原生解决方案的思路上。这时，发现 Chrome 浏览器在近期发布的版本中添加了截图的功能。下面以获取 LinkedIn 整个首页为例来介绍下具体的操做方法。

利用 Chrome 浏览器的开发者工具截取整个页面

1. 打开 Chrome 浏览器，进入须要截图的网站页面

2. 等待页面加载完毕后，经过下面方法打开开发者工具

• 在页面任何地方点击鼠标右键，在弹出菜单中选择“检查（Inspect）”选项
• 或者使用快捷键组合：Alt + Command + I (Mac) | Ctrl + Shift + I (Windows)

3. 使用快捷键组合来打开命令行（command palette）：Command + Shift + P (Mac) | Ctrl + Shift + P (Windows)

4. 在命令行中输入“Screen”，这时自动补齐功能会显示出一些包含 "Screen" 关键字的命令。移动方向键到“Capture full size screenshot”并回车（或直接用鼠标点击这个选项）

文章末尾有动图演示操做步骤

在此以后，Chrome会将截图下载到电脑设定的下载区域。

扩展应用场景一

因为自适应网页设计（Responsive Web Design）的兴起，不少网站在手机浏览器的显示效果和电脑上是不同的，利用 Chrome 的开发者工具，还能够实现对不一样型号手机整个页面的截图：

1. 进入须要截图的网站页面，打开开发者工具（方法和上面两步相同）
2. 点击开发者工具左上角的视图转换按钮，这时浏览器中的页面会呈现出手机视图。同时，在浏览器中还能够选择不一样的的手机或者平板型号来对比不一样硬件上观看页面的不一样效果
3. 从新加载页面
4. 打开命令行，进行截图命令（方法和上面第四步相同）

扩展应用场景二

若是并不想截取整个页面，而是截取页面中的一些元素，也能够利用开发者工具实现。下面以截取 LinkedIn 网站中的用户身份信息为例：

1. 进入须要截图的网站页面，打开开发者工具（方法和上面两步相同）
2. 点击开发者工具左上角的“选取元素”按钮，在网页中点击要截图的元素
3. 因为 HTML 父子元素的嵌套，可能选中的是须要截图元素的子元素。这时，须要在开发者工具中对所选取的元素进行调整：因为选取的是子元素，因此只须要在“选取元素”按钮，旁边的"Elements Tab"里边按照嵌套关系，找到合适的父元素就能够了。这时，点击选中该父元素。
4. 打开命令行，进行截图命令（方法和上面第四步相似）。不过须要注意这时在包含 "Screen" 关键字的命令中选取“Capture node screenshot”而非“Capture full size screenshot”。

后记

在开始写这一篇文章时，我最初的思路是写成相似百度经验或是 wiki how to 那种形式的说明性文章。可是，发如今介绍一个问题的解决方案时，更有价值的是介绍下解决问题的思路，这样读者在之后遇到相似问题时，能够用类似的思路去探索问题的答案。另外，也想给你们分享下程序员是如何思惟和工做的。上文引用的 How To Become A Hacker 原文很是值得一读，中文连接：如何成为黑客。

若是您以为这篇文章对您或身边的人有帮助。欢迎您点赞、留言、转发或者关注我，这些行为都是对我继续写做的巨大鼓励！

做者介绍：LinkedIn Web 前端工程师，坐标纽约。科技和人文交叉路口的活跃份子。更多信息，请关注新浪微博：@流浪的拉多

Chrome 相关功能的两次更新：

• What's New In DevTools (Chrome 59)

• What's New In DevTools (Chrome 62)

---

为了避免影响阅读体验，将​动图放在文末：