How to take a screenshot that includes a scrolling element within a web page in Firefox?

windows firefox scrolling screenshot capture

151,768

Solution 1

My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.

Just pop open the developer tools → Find the element → Right Click and take screenshot

It didn't work on one of my internal site so cannot say it will work for all.

Update after OP's Edit:

If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...

It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.

Read below from https://en.wikipedia.org/wiki/Screenshot

A screenshot, screen capture, screen cap, cap, screen dump, or screengrab is an image taken by a person to record the visible items displayed on the monitor, television, or other visual output device in use.

If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.

Solution 2

2021 Edit

The toolbar was removed from FF. But you can still access the commands by typing them in the console prefixed with a :. So for screenshots use

:screenshot --fullpage fullpage.png

:screenshot --selector #hot-network-questions fullpage.png

Old Answer

You can use the screenshot command from the Developer Toolbar:

Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.
In the toolbar, type the command screenshot --fullpage fullpage.png.

To capture a single element you can use its css selector with the --selector flag e.g.

screenshot --selector #hot-network-questions

will get you the image below

Solution 3

Using Firefox's Responsive Design Mode, set the width to something normal and the height such that it's enough to encompass the entire page. Then click the screenshot button (the camera icon).

Solution 4

There is Software called Snagit that may solve your issue. This software can take the screen shot in different types, like a scrolling window and also can record video.

It is a paid application, but does have a trial available as well.

Solution 5

I use Screenpresso. It allows you to take a scrolling screenshot. Basically you take a screenshot, scroll down and take another and so on, then Screenpresso stitches them together. Screenpresso is also free.

FYI, the shortcut keys for scrolling screenshot is WindowsKey+Shift+PrintScreen. You then need to click the window you would like to scroll. When you get to the next part to screenshot, right click, scroll down, right click and so on. Whe you are finished, left click and they will get stitched together. Make sure to get some overlap on each screenshot so the stitching process works better.

View more solutions

151,768

RockPaperLz- Mask it or Casket

Updated on September 18, 2022

Comments

RockPaperLz- Mask it or Casket over 1 year

I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.

It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).

The column contains formatted text and a few small images.

For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?

To be clear, I need to capture the entire page, not just the element itself.

I would like to accomplish this using Firefox on Windows.
- Giacomo1968 almost 8 years
  
  Ever consider saving the page as a PDF? The catch with this method is some websites have a “print view” which is what the PDF will contain, but in some cases this technique can work.
- RockPaperLz- Mask it or Casket almost 8 years
  
  @JakeGould Thanks Jake. Would that work to scroll and element within a page?
- Giacomo1968 almost 8 years
  
  Welp, missed the part about the scrolling element. That is too idiosyncratic for me to comment on so all I can say is I can’t be confident now that the PDF printing method will work. Best of luck with other ideas presented here.
- user almost 8 years
  
  Possibly useful: Firefox plugin to save complete rendered page as image on Software Recommendations.
- tehwalris almost 8 years
  
  If I understand correctly, the scrolling element in question is probably being forced to less than it's full height. Setting the height style attribute to auto on that element may help.
- Steve almost 8 years
  
  There is a tool we use at my work called SnagIt that will do this (I believe).
- RockPaperLz- Mask it or Casket almost 8 years
  
  @tehwalris That's a great idea. Thanks! I'll give that a try as well. I could even create a CSS overlay to do that automatically.
RockPaperLz- Mask it or Casket almost 8 years

Until I got to item #4, I thought you were only suggesting to combine all the items! I was imagining having 20 screens and stacking them one on top of the other... LOL. Then I got to #4, and learned that you meant the items to be used individually or combined.
clhy almost 8 years

@RockPaperLizard I found another post with the same answer and OP was edited by you.
A.L almost 8 years

if you find this as an answer mark it and post it in comment What does that mean?
MonkeyZeus almost 8 years

@A.L This user does not have enough rep for a comment so they provided an answer in hopes of it being converted into a comment by a moderator.
RockPaperLz- Mask it or Casket almost 8 years

@pun Thank you. But I need to take a screenshot of the entire page with the element expanded, not just the element itself.
RockPaperLz- Mask it or Casket almost 8 years

Thank you so much for your answer (and great image!), but unfortunately this does not answer the question. I need to take a screenshot of the entire page including the element, not just of the element itself.
Digital Chris almost 8 years

@RockPaperLizard actually @pun's answer DOES answer your question... he just didn't apply it to your use case. You can follow his answer but select the <body> element and it will give you the desired screenshot.
NiCk Newman almost 8 years

But if you zoom out the page, there is no way to scale it back out without distortion.
RockPaperLz- Mask it or Casket almost 8 years

Thank you for your answer, I appreciate it. Unfortunately, it does not look like Nimbus Screen Capture can capture the entire contents of a scrolling element within a page. If I'm mistaken, could you provide more detail on how to accomplish this with that tool?
Roy Tinker almost 8 years

I've used SnagIt for years. It's a very useful piece of software.
Admin almost 8 years

If you edit the height of the DOM element so there are no internal scrollbars then use FireShot to capture the whole page, it should work.
Keith Hall almost 8 years

@RockPaperLizard you are right, it doesn't seem to support this - I had thought that the fragment mode would cover scrolling elements, or that the selected area mode would work but, while the window can be scrolled in this mode, it seems that the scrolling elements can't.
RockPaperLz- Mask it or Casket almost 8 years

Thanks for confirming I just wasn't seeing it. Maybe they will add that functionality to a future version.
MrFox over 6 years

I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just not the file. Same goes for right-clicking the element in developer mode and copying it that way. No image gets send to the clipboard.
MrFox over 6 years

I was able to get one screenshot like this, but no more. It still produces the camera shutter sound, just puts nothing in the clipboard. Same goes for the command in developer toolbar, no file gets created.
AxiomaticNexus over 4 years

@MrFox A png file is created in the Downloads folder.
RockPaperLz- Mask it or Casket about 4 years

After much struggling with taking a screenshot of a stubborn web page, I remembered your tip. It worked great (and was the only answer here that worked for this specific page). Thank you! The only challenge was setting the height to the appropriate value. I found the best technique was to go into Developer Mode while in Responsive Design Mode and inspect the layout of the tall element to determine its new height. If you have a better technique, please let us know! :)
one-hand-octopus about 3 years

How / Where do you open the toolbar? I tried shift + F2 nothing happened
topher about 3 years

@user122973 I don't think the toolbar still exists. However, if you open your dev tools and go to settings in the hamburger menu next to the close button. Under Available Toolbox Buttons there's a Take a screenshot of the entire page. This adds a camera button next to the responsive view button. The screenshots are saved in the Downloads folder for me on MacOS. This doesn't take a screenshot of the element only though.
topher about 3 years

@user122973 the screenshot command works in the console if you prefix it with a : i.e :screenshot --selector ...