5

I love the "Capture full size screenshot" feature built into Chrome and Brave and use it frequently.

However, it seems that certain websites are coded in a way that the "Capture full size screenshot" feature does not know how to handle. And so then the resulting screenshot does not contain the full scrolled length of the page.

An example I've run into multiple times is long forms on https://airtable.com.

I'm wondering if there is some workaround; perhaps I could open the DevTools panel and adjust a certain element's HTML or CSS before pressing "Capture full size screenshot". Although it would be annoying to need to do this, I really don't want to install extensions.

Ryan
  • 1,736
  • 11
  • 41
  • 68
  • *"I'm wondering if there is some workaround"* -- Just a thought, but have you tried scrolling to the bottom of the page with these problem pages? Personal experience, but this is the issue I've encountered most often (i.e. certain portions of the page are loaded via JavaScript, but only after scrolling). – Anaksunaman Sep 05 '21 at 14:42
  • @Anaksunaman Thanks for the suggestion. Yep, I tried that already, but it didn't help. – Ryan Sep 05 '21 at 15:54
  • Use this Chrome extension instead it uses many tricks to ensure optimal results https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl – Gantendo Sep 15 '21 at 23:42
  • You can use https://recorder.easeus.com/screenshot.html to capture full size screenshot with good quality images and I found It very helpful. – Nooruddin Lakhani Nov 21 '22 at 05:36

2 Answers2

6

I found a really helpful answer here*, which worked!

I opened DevTools and added this CSS rule before running "Capture full size screenshot":

html, body, div, section {
  overflow: visible !important;
}

Another person on that page also mentioned:

Note that you can also use a JavaScript bookmarklet to toggle this style rule.

javascript:/*style::toggle*/(function(){var L='s-overflow',S='html,body,div,section{overflow:visible!important;}',SS,E=document.querySelector('style[id="'+L+'"]');if(E){E.parentNode.removeChild(E)}else{SS=document.createElement('style');SS.setAttribute('type','text/css');SS.id=L;SS.textContent=S;document.querySelector('head').appendChild(SS)}})()

Update on 2021-09-15: I just tried that JavaScript bookmarklet when a page at notion.site was giving me trouble, and the bookmarklet fixed the problem (and "Capture full size screenshot" then worked correctly).

*2021-10-09 Update: Actually, I decided to add , section too since sites like LinkedIn use that tag.

PaulMest
  • 103
  • 4
Ryan
  • 1,736
  • 11
  • 41
  • 68
  • I have noticed that capturing full-size screenshots also doesn't work with scaled SVG files, and this trick doesn't appear to resolve it. – arik-so Feb 21 '23 at 05:30
1

@Ryan's solution worked for me, but sometimes it breaks the layout since the div (and section) selector is quite broad.

To fix this:

  1. Open the DevTools
  2. Select the element you want to screenshot (or the scrollable area)
  3. Paste the code below into the Console, and
  4. Press Enter ⏎
var elem = $0;
while (elem) {
  elem.style.setProperty('overflow', 'visible', 'important');
  elem = elem.parentElement;
}

Then capture a full size or node screenshot (⌘⇧P on macOS / CTRL⇧P on Window, and search for screenshot).

miu
  • 161
  • 4