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 會如下載的方式保存你的截圖。