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

Question

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.

Answer 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.

Answer 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

or

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

Old Answer

You can use the screenshot command from the Developer Toolbar:

1. Press Shift + F2 to open the toolbar or select it from the Web Developer Tools menu.

2. 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

Answer 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).

Answer 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.

Answer 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.

Answer 6

There is an extension called Nimbus Screen Capture which is perfectly suited to this task.

You have the option to capture:

• the visible part of the page (useful to not include the browser elements as opposed to alt+Print Scrn)
• a fragment of the page (whereby you can hover over regions on the screen in order to find the fragment you want - these regions correspond to their underlying HTML elements)
• selected area (you manually click and drag where you want the screenshot, supports scrolling while dragging)
• the entire page

Answer 7

2024 Answer

I found a solution.

1. Open the devtools (F12)
2. Set device height to 9999px:
3. Then right click the dom-node that has the scrollbar and do a screenshot:

That's it!

Answer 8

Options to fit everything on one page:

• Use <Ctrl>- to fit everything on one page
• Rotate your screen to portrait mode
• Use a second screen in portrait mode and locate it below the first one
• Combine all of the above

Another option is to take a screen shot of the upper part of what you want to capture. Scroll down, take the next screen shoot. Repeat this until you've captured everything.
Optionally: combine the screen shots into one big image using an image editor (e.g. gimp).

Answer 9

To take screenshots you can add an Extension like easy screenshot. Then It will be much easier for you to take screen shots.

Answer 10

For DESKTOP programs, with scrolling window ApowerSoft capture did the job for me.