If you’re like me and like to use the least possible number of Extensions to add functionality to your browser, this quick tip may come in handy for you (video included).
With version 59 (April 2017), Chrome’s DevTools added some nifty features to web developers out there, including a way of checking CSS and JS usage (very cool), but also something very useful: Full Size Page Screenshots of a page.
Here’s how to use it – The Quick Way:
Open Chrome’s Devtools and launch the Command Menu (shortcuts below the screenshot), type “full” and select “Capture full size screenshot“:
How to open Chrome’s DevTools:
- right-click > Inspect
CMD+ALT+i(Mac)CTRL+Shift+i(Windows and Linux)How to launch the Command Menu within DevTools:
CMD+Shift+P(Mac)CTRL+Shift+P(Windows and Linux)
This method will use the device view settings you had previously setup and take you straight to an image File Save prompt (PNG format). To use different one (like for making a screenshot of a mobile device view), use the following method.
The Nitty Gritty Way:
- Browse to your Page of choice
- Open Chrome’s DevTools
- If not already active click the the
toggle device toolbarbutton:
- In the device view, use device toolbar settings (…) menu and select “Capture full size screenshot”, which will open a file save prompt right after.
And that’s it! It’s not a flawless solution, as it had trouble with pages with a responsive full width image header, but for the most part, it works just fine. One less extension loading on my browser! 🙂
Here’s a quick video on how to use this new feature: