How to take a screenshot of an entire scroll element?

Question

I searched the Internet to find a way to do it, but I didn’t find anything that works.

I use the web version of Tinder app. There's a chat section inside a div and I want to take a pic of the entire chat in just one shot. The div element, which has a scroll function, is inside of this red border:

I usually use Chrome, but I can use Firefox or any browser that could do it. Is it possible?

Solution 1

OK. I had an insight and could solve the problem, hehe.

I went to div properties and changed the 'height' in CSS to 500%. Voilà! Then I could use "Screenshot Node" feature on Firefox. It was not working before because the height was on 100% so the screenshot node only toke the visible part on screen, not all element :D

Solution 2

From Chrome dev tools > Device Toolbar, you can focus the required element and click on Capture full size screenshot.

Solution 3

I use Nimbus Screenshot & Screen Video Recorder for most of my screenshots and has many options to capture different parts of the page, there are other options but this is the best I've found for sure.

Comments

[usrNotFound]

if you using chrome use Full Page screen capture.

[Eduardo M]

@usrNotFound unfortunately it doesn't work too. I had already tried before. But I got the problem and answered my own question :)

[Eduardo M]

I already tried this extension but didn't work in my case. Thanks anyway.

[Ali Saeed]

Best solution without requiring any extensions!

[Admin]

You can do this without entering device mode by opening the dev console, hitting ctrl+shift+p (windows) to open the command prompt and typing "Screenshot". Select full size screenshot and it works.