21

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:

Screenshot of the page

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

Improve this question
2
  • if you using chrome use Full Page screen capture.
    – usrNotFound
    Commented Sep 15, 2017 at 1:55
  • 1
    @usrNotFound unfortunately it doesn't work too. I had already tried before. But I got the problem and answered my own question :)
    – Eduardo M
    Commented Sep 15, 2017 at 2:05

5 Answers 5

Reset to default
13

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

Screenshot of screenshot capture

Improve this answer
3
  • Best solution without requiring any extensions!
    – Ali Saeed
    Commented Oct 22, 2020 at 17:20
  • 1
    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.
    – ale10ander
    Commented Jun 8, 2022 at 23:37
  • Un fortunately the div I want to capture is very wide. This method doesn't include the part that goes out of the screen to the right. Any ideas?
    – elysch
    Commented May 22 at 17:49
12

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

Improve this answer
1

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.

Improve this answer
1
  • I already tried this extension but didn't work in my case. Thanks anyway.
    – Eduardo M
    Commented Sep 14, 2017 at 20:22
1

Nowadays, you can use Capture node screenshot in the Developer Tools Interface (navigating the F12), in the Elements tab.

Capture node screenshot

Improve this answer
2
  • 4
    It doesn't scroll the node if it has a scrollbar.
    – dashesy
    Commented Jul 10, 2023 at 17:02
  • Still not understand how this node screenshot works. Here on this page, if you inspect the element <div id="answers"> and take a screenshot it works well. but on other pages doesn't work. Example: the playground page of open A there are chat messages,
    – mihkov
    Commented May 9 at 14:43
1

This happens because the scroll area is not a browser viewport scroll. To confirm, scroll down the page and look for a full viewport scrollbar on the right. For instance on this page, its easy to see.

Likely there is overflow scroll trickery going on within a content area. The screenshot tool will scroll the viewport scroll, but not this content area overflow scroll. There is no viewport scroll, so the tool thinks there is nothing additional to screenshot.

You can make the screenshot tool work again, by removing the css that makes the overflow scroll on the content div. Use the browser dev tools and just uncheck the css.

There will likely only be a couple things. An overflow hidden on a parent, then scroll and height assignments on children.

Once removed, the page will scroll like a normal page, then the screenshot tool will work.

Its annoying, but once you figure it out its pretty quick.

Improve this answer
1
  • It's like to traverse all parents hierarchy and remove overflow option. I am glad that the browser has option to filter style rules
    – mihkov
    Commented May 9 at 14:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .