
Ricky Lin
Thursday, July 2, 2020
How to capture web pages and long screenshots with Chrome DevTools?
- Open Chrome DevTools
- Click more_vert in the top-right, then choose filter_none to make it a separate window
Ctrl + Shift + P(Command + Shift + P)- Type
screenshot- Capture area screenshot: area screenshot. After selecting it, your cursor changes to add. Use it to select an area on the page.
- Capture full size screenshot: long screenshot. It completes automatically after about one second.
- Capture node screenshot: node screenshot. Similar to a long screenshot, but only visible parts are captured and the rest is blank.
- Capture screenshot: normal screenshot. It captures the visible page. If DevTools is not in a separate window, the result is affected.