前言

  • 捕获屏幕内容是一个非常常见的功能需求，我非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是，你可以完成以下任务吗？
    – 截取网页上所有内容的屏幕快照，包括窗口中未显示的所有内容。
    – 精确捕获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"(中文“更多工具->开发者工具”打开调试页面

    • puppeteer 网页截图_edge

  • 步骤3、按下键盘上 “Ctrl+Shift+P”
  • 步骤4、键入内容“ capture ” 后，根据自己的需要选择以下任意，全网页截屏可以选第一个(“capture full size screenshot”)：

“capture full size screenshot”【整个网页，全网页截屏】
“capture node screenshot”【节点网页】
“capture screenshot”【当前屏幕】

注意：如果chrome是中文版本，则这步需要输入“截屏"字样，之后出现的也将是中文的菜单;

puppeteer 网页截图_全网页_02

  • 步骤5、按下回车即可。