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 会以下载的方式保存你的截图。