I meant this to be a question because I was having a hard time figuring this out. But I eventually found something that worked for me. I want to share this because the problem is both annoying and bizarre, and I couldn’t find another answer online.

The problem: I need to save a web page that contains scrollable content, for example as in my case a chat session with help desk. I do “Save as” HTML, but this is almost always unreliable because it contains javascript that breaks down if I open the page offline, and css rules get messed up somehow too. So I want both a HTML copy and a screenshot. My go-to option is “Print as PDF” but, often not all content makes it to the final file; for example scrollable content. I welcomed Firefox’s “Take screenshot” functionality with open arms when they made it available, but unfortunately the output suffers the same outcomes as PDFs: content is missing.

What worked for me is changing the text area’s “height” value using the Firefox inspector. This is the tricky part. You have to identify the container element of the scrollable content which should have a fixed height, and tune it to a higher value (high enough to contain the whole content, like 10000px). Now “Print as PDF” will save everything to the final PDF. Firefox’s “Take a screenshot” will also register all the content, but there seems to be a catch. It has two buttons, “Download” for saving the screenshot as a file and “Copy” for saving the picture to the clipboard. The catch is that “Dowload” doesn’t work, at least for me. The final image is just a black rectangle. On the other hand “Copy” works: open GIMP, Ctrl+N, Ctrl+V, save.