How to take a screenshot of an entire scroll element?

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