11

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 or conversations on ChatGPT.

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
  • 2,388

2 Answers2

13

I found a really helpful answer* at Mozilla support, 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.

2025-04-27: Here is some bookmarklet JS code for letting you grab a screenshot (or PDF) of your full ChatGPT conversation:

javascript:(function(){var customStyles=':not(.katex):not(.katex *) {font-family: Arial, sans-serif !important;}' + ':not(.katex) code:not(.katex *), :not(.katex) span:not(.katex *) {font-family: Menlo, monospace !important;white-space: pre-wrap !important;overflow-wrap: break-word !important;}' + ':not(.katex) .overflow-auto:not(.katex *), :not(.katex *) .overflow-auto {overflow: visible !important;}' + ':not(.katex) .h-full:not(.katex *), :not(.katex *) .h-full {height: auto !important;}' + ':not(.katex) #text:not(.katex *), :not(.katex *) #text {white-space: pre-wrap !important;}';var styleSheet=document.createElement('style');styleSheet.type='text/css';styleSheet.innerText=customStyles;document.head.appendChild(styleSheet);})();
Ryan
  • 2,388
7

@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 and select the element (or the scrollable area) you want to screenshot (⌘⇧C on macOS / CTRL⇧C on Windows, hover over the particular element on the page and click it)
  2. Go to the Console tab of the DevTools
  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;
}

This code will add the overflow: visible !important style attribute only to the relevant node and all of its parents.

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

Franck Dernoncourt
  • 24,246
  • 64
  • 231
  • 400
miu
  • 219