有下拉条时截网页全图方法(Chrome)

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

注：火狐浏览器右上角有截全屏工具

1. 打开 Chrome 浏览器，进入需要截图的网站页面。
2. 等待页面加载完毕后，通过第三步打开开发者工具。
3. 在页面任何地方点击鼠标右键，在弹出菜单中选择“检查（Inspect）”选项，或者使用快捷键组合：Alt + Command + I (Mac) || Ctrl + Shift + I (Windows)。
4. 使用快捷键组合来打开命令行（command palette）：Command + Shift + P (Mac) | Ctrl + Shift + P (Windows)。
5. 在命令行中输入“Screen”，这时自动补齐功能会显示出一些包含 “Screen” 关键字的命令。移动方向键到“Capture full size screenshot”并回车（或直接用鼠标点击这个选项）。

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

---

扩展应用场景一

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

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

---

扩展应用场景二

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

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