Chrome 原生 区域截图和节点截图方法

最近经常使用 puppeteer 获取页面元素的截图，忽然就冒出了chrome自己应该也是支持 HTML nodes 节点截图的想法，因而检索了一下

果真, 2017 年的 Chrome 62 就已经支持了区域截图和 HTML 元素节点截图。

Customize Chrome DevTools | Tools for Web Developers

区域截图

1. F12 打开开发者工具，点击 inspect。
2. 按住 Ctrl (Windows) 或者 Command (Mac)，而后拖动选择你想要截图的区域。
3. 松开鼠标，Chrome 会如下载的方式保存你的截图。

HTML nodes 节点截图

1. F12打开开发者工具，Elements 一栏中选择你想要截图的节点。
2. Cmd/Ctrl+Shift+P 打开命令面板(Command Menu)
3. 输入 node 而后选择 Capture node screenshot, Chrome 会如下载的方式保存你的截图。