前言
- 捕获屏幕内容是一个非常常见的功能需求，我非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是，你可以完成以下任务吗？
- – 截取网页上所有内容的屏幕快照，包括窗口中未显示的所有内容。
– 精确捕获DOM元素的内容
- 本文整理了通过Edge、chrome两种浏览器解决上述问题的方法。
Edge浏览器
- 步骤1、启动 Edge 浏览器（Edge Canary以上版本），在微软Edge浏览上打开需要截图的网页；
- 步骤2、下面两种方法任选一种，皆可：
– 方法一、在浏览器右上角选择省略号“…”或者按快捷键「ALT + F」打开「设置及其他」菜单，在弹出的菜单下方选择“网页捕获”；
– 方法二、或者直接使用快捷键 Ctrl + Shift + S调出“网页捕获页面
- 步骤3、选择“整页”而非“自由选择区域”进行整页截屏
- 步骤4、之后可以在本地对截的全网页进行涂鸦注释或修改，当然也可以直接保存整个页面。
Chrome浏览器
- 步骤1、使用chrome浏览器，打开目标网站
- 步骤2、按下键盘上 “F12” 或者 “Ctrl + Shift + I"或者页面选择“More Tools->Developer Tools"(中文“更多工具->开发者工具”打开调试页面
- 步骤3、按下键盘上 “Ctrl+Shift+P”
- 步骤4、键入内容“ capture ” 后，根据自己的需要选择以下任意，全网页截屏可以选第一个(“capture full size screenshot”)：
“capture full size screenshot”【整个网页，全网页截屏】
“capture node screenshot”【节点网页】
“capture screenshot”【当前屏幕】
注意：如果chrome是中文版本，则这步需要输入“截屏"字样，之后出现的也将是中文的菜单;
- 步骤5、按下回车即可。
注意：本文的操作基础是Windows系统，如果是其他操作系统，快捷键或页面等细节可能略有不同。
