It can be quite useful to get a “full page” screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire website even if it needs to be scrolled around to see all of it. You could take individual screenshots of the visible area and use a photo editing program to stitch them together, but that’s a pain in the but. Nevermind the fact that it’s extra tricky with things like fixed position elements.
Fortunately, browsers can help us out a bit here.
Chrome
As of Chrome 59, it’s built into DevTools. Here’s a video. You use “Responsive Design Mode”, then the menu option to get the full page screenshot is in the menu in the upper right.
I find it easy to use the command prompt to do it as well:
If you need a “mobile” full-length screenshot, just adjust the responsive view to the size you want and save again. Handy!
I’ve also had good luck with the Nimbus extension in Chrome.
Firefox
There is a setting in the Firefox DevTools that you need to turn on called Take a screenshot of the entire page under Available Toolbox Buttons. Flip that on, and you get a button.
Safari
In Safari DevTools, select a node, right-click, and you’ll see Capture Screenshot in the context menu.
Safari has File > Export as PDF, but it’s pretty awkward. I have no idea how it decides what to export and what not to, the layout is weird, and it’s broken into multiple pages for some reason.
The Awesome Screenshot extension seems to do the trick.
There are also some native apps like BrowseShot and Paparazzi!
I always use this extension on chrome Full Page Screen Capture, is excelent.
I found Command Palette in Chrome helpful to capture full screenshots. Cmd + Shift + P (like ST or VSCode)
I’ve always used Google’s “Save to Google Drive” Chrome extension. It lets you capture the visible or entire page to PNG, or even save to a .mht file which can come in handy.
The Firefox feature you mention seems to have a limit on the size of the image. It seems to scale the image down to whatever its limit is.
Great to see the options in the browsers to take screenshots. Didn’t realize the option in Firefox, thanks!
Glad you mentioned Nimbus, one of my favorite Chrome extensions. I love that you can capture a fragment, a selected area, or the entire page for a screenshot.
What makes Nimbus stand out for me is the ability to add text and arrows on the screenshot, ideal for clients or users asking about a feature. Great for tutorials and troubleshooting!
Excellent tips! Nice to see browsers implementing this feature.
Another alternative is the GNU Image Manipulation Program (https://www.gimp.org/) — you can use:
File > Create > From Webpage
and then enter a pixel width and URL.
(N.B. Windows users! make user you get version 2.8.22 (current version as of this post) as there was a bug with a prior version that caused problems for this feature (missing lib)).
Thank you again for the tips!
I think it’s worth noting that you can also take full page screenshots in Chrome using the new Command Menu (you first need to have Dev Tools open to be able to open the Command Menu) by starting to type
screenshotinto the Command Menu and then select the optionCapture full size screenshotfrom the auto completed list.In Firefox there’s also been a similar command for a longer time by using the Firefox Developer Toolbar (GCLI). Just open the Developer Toolbar by pressing
Shift+F2and type inscreenshot --fullpage filename.png. It has nice tool tips for all the parameters while you’re typing, but you can also get more info about the command by typinghelp screenshot. There are also command flags for saving the screenshot to the clipboard instead or posting it to Imgur.That’s rad! Thanks for sharing. :)
Wow..really helpful..didn’t know that..i always use a snipping tool but in chrome, it will give two option, visible part and full page and Firefox only capture the full page, no option for capturing the visible part.
Awesome Screenshot has, or at least had, adware in it according to Bit Defender. It’s also not optimized for retina displays which leads to poor usability.
It’s also built into Vivaldi and has been for quite some time now so it didn’t rely on Chromium functionality to do it.
oh? it is? cool. gonna check it out right now; Vivaldi being my Chrome-replacement and secondary browser ;)
cu, w0lf.
Safari has File > Export as PDF
It also has “Save As…” but none of them is for saving screenshot.
Export as PDF uses styles to convert page into pdf but it has NOTHING to do with screenshots.
So this one’s not free; is Mac only, but it also does multiple resolutions AND exports layered PSD files as well as PNG. http://www.pagelayers.com
I’ve had great luck with Page Layers for Mac. It’s not cheap but it captures nearly every element. You can specify viewport size as well as resolution (@2x eg) and export as PNG or layered Photoshop file which is pretty cool.
https://www.pagelayers.com/
In MacOS, for as long as I can remember, “Command-3” has taken a total screenshot in any application or browser, as well as the Finder. “Shift-Command-4” first reveals a selection tool to refine the shot. All are saved as a PNG on the Desk Top.
Sorry! My comment should have cited “Shift-Command-3” and not just “Command-3”.
Shift-Command-3
screenshots your active desktop(s).
Shift-Command-4
triggers crosshairs for selecting the desired captured area on your screen. Click, drag the bounding box to encompass your selection, and release to capture. Prior to clicking, you can press your space-bar to trigger the Capture-Window mode, which upon clicking will capture a screenshot of the entire selected window. Wickedly useful for capturing screenshots of system menus.
In both, the image(s) is saved as a PNG on your desktop.
Add the Option key, to either of the screenshot key commands, to send the resulting screenshot to your Clipboard, instead of the desktop.
Shift-Option-Command-4
Adding to what Lincoln Nail and others mentioned, you can use CMD-SHIFT-4 to get the screenshot crosshairs on a Mac. Then, press SPACEBAR to change the crosshairs to a camera icon, and click the browser window you want to screenshot.
This will capture the current size of the webpage and the browser “chrome”. It even works with IE/Edge running in Parallels on a Mac!
You can use the Window Resizer first to size the window appropriately first.
(https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)
On Firefox I used ScreenGrab! for years, still unbeatable for me: full page, visible portion, portion, and the choice to save or copy in clipboard.
I commonly use the Vialdi Browser (https://vivaldi.com) to create my full page screenshots. It has no limits in the size/length of the screenshots and it plays also nice with javascript inclusions, such as to top buttons (ignores them mostly). Also nice for screenshots, videos and gifs of all kind is Snagit (https://www.techsmith.com/screen-capture.html). I use Snagit a lot for documentations.
I Use this free excellent tool:
https://getsharex.com/
It can capture screenshots and videos in many ways.
Also has scrolling capture for capture web pages and such.
iOS: Yes, copying the web page as a PDF to an app (such as e.g., Noteability or — I suspect but haven’t tried — Kindle or iBooks) works. It produces a PDF. One file, albeit mult-page instead of full-stream. For PDF is a dead-tree (paper) oriented thingie. I don’t know of any other sort of “extension” on an iOS device that hasn’t been jail-broken other than to have an item added to the Safari “Share” actions list.
Or use the Vivaldi Browser with their integrated Screenshot tool.
I’ve always used the Mac app, Paparazzi but digging the in-browser techniques here too.
Great tip. Do you know any similar trick to capture full screenshot divided into page for print (option print page usualy change page content if no css provided)?
Glad you mentioned Paparazzi. It has a few tricks that come in handy:
Setting a delay (you choose how many seconds) before it captures to ensure everything is loaded.
Setting min/max dimensions
Setting a crop ratio or pixel dimensions.
And the biggest advantage of all: You can drag the screenshot off of Paparazzi and directly into Sketch. This effectively turns a live website into a Sketch doc. It’s better than PageLayers because the text remains live.
Paparazzi! does amazing job – far better than browser’s extensions. I tried each in the past before I found Paparazzi! and this one worked the best.
Firefox has had the ‘shell’ with a command to do (full page) screenshots for a while: https://stackoverflow.com/questions/13158083/take-a-full-page-screenshot-with-firefox#answer-14830242
I guess the new method hooked into that functionality.
This is my first comment here on great css-trick \o/
Sadly built-in screenshot tool in Chrome and Firefox doesn’t support pages contains scroll interactions (ex. http://scrollmagic.io), the only way as far as I know is using add-on/extension.
Bad news is the new built-in screenshot tool that will add to Firefox by default soon won’t support this feature (as the team answered me on opened github issue)
Safari and others use media print css rules for pdf export. They do append their own predefined print ruleset, but it can be overriden by providing a print.css file